2023-03-01 react-native 实现 复制功能 @react-native-community/clipboard 报错:TypeError: null is not an object (evaluating 'NativeClipboard_1.default.setString')。
阅读原文时间:2023年07月09日阅读:1

我的react-native(下称rn)版本为0.68,要实现这个功能主要用到rn的clipboard,在21年的时候他就已经提示clipboard会在未来的版本中上去掉,官方的建议是不要再从react-native引入,而实替换为@react-native-community/clipboard,实现方法详见下面:

1.安装clipboard模块:

yarn add @react-native-community/clipboard

2.在项目中使用:

import Clipboard from "@react-native-community/clipboard";

···

  // 复制事件(需要绑定到button中)
const handleClick = (e) => {
console.log(e);
Clipboard.setString(e)
ToastAndroid.showWithGravityAndOffset(
"内容已复制到剪贴板",
ToastAndroid.LONG,
ToastAndroid.CENTER,
25,
70
);
}

这时候你点击按钮,按钮触发Clipboard,报错:TypeError: null is not an object (evaluating 'NativeClipboard_1.default.setString')。

这是由于你还需要在android包做一些配置,详见下面:

3.打开项目名\android\app\build.gradle,并在里面添加如下代码:

dependencies {
  implementation project(':@react-native-community-clipboard') // 添加这行代码


}

4.打开项目名\android\app\src\main\java\com\app\MainApplication.java,并在里面添加如下代码:

import com.reactnativecommunity.clipboard.ClipboardPackage; // 添加这行代码

public class MainApplication extends Application implements ReactApplication { …

5.打开项目名\android\settings.gradle,并在里面添加如下代码:

include ':@react-native-community-clipboard'
project(':@react-native-community-clipboard').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/clipboard/android')

6.最重要的一步,卸载现在的版本,重新打包。

最后:第3、4、5步你可以不做,我也不知道这3步是否有效,我是按别人的操作来执行的,我也成功实现了该功能,我建议你报错(TypeError: null is not an object (evaluating 'NativeClipboard_1.default.setString')。)后直接卸载app,然后重新打包看效果,如果没有效果,那就执行3、4、5步骤。