我的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步骤。

2023-03-01 react-native 实现 复制功能 @react-native-community/clipboard 报错:TypeError: null is not an object (evaluating 'NativeClipboard_1.default.setString')。的更多相关文章

  1. react爬坑之路(一)--报错output.path不是绝对路径

    之前,一直在纠结是学习angular好,学习vue好,还是学习react好,网上一搜索,也是各种对比,各种互喷,看过之后更纠结.就跟小时候一样纠结长大了是上清华好,还是上北大好,最后证明我想多了.总之 ...

  2. 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function

    react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...

  3. react报错 TypeError: Cannot read property 'setState' of undefined

    代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false ...

  4. React Native在虚拟运行app时,报错RCTRootView not found,怎么解决?

    报错: 解决方案:

  5. react+typescript报错集锦<持续更新>

    typescript报错集锦 错误:Import sources within a group must be alphabetized.tslint(ordered-imports) 原因:impo ...

  6. 【React Native开发】React Native控件之ProgressBarAndroid进度条解说(12)

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

  7. react native-调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错

    调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错,而在iOS上运行没问题.原因是因为接口是有验证信息的,而调用这个插件时没有传入,在iOS上会自动加 ...

  8. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  9. React-Native(三):React Native是基于React设计的

    React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...

  10. 【问题与解决】Mac OS通过 npm 安装 React Native 报错(checkPermissions Missing write access to /usr/local/lib/node_modules)

    报错情况: 当Mac OS通过 npm 安装 React Native 报错,警告文字为:checkPermissions Missing write access to /usr/local/lib ...

随机推荐

  1. OPENMP FOR CONSTRUCT GUIDED 调度方式实现原理和源码分析

    OPENMP FOR CONSTRUCT GUIDED 调度方式实现原理和源码分析 前言 在本篇文章当中主要给大家介绍在 OpenMP 当中 guided 调度方式的实现原理.这个调度方式其实和 dy ...

  2. 躬身入局,干货分享,2023年春招后端技术岗(Python)面试实战教程,Offer今始为君发

    早春二月,研发倍忙,杂花生树,群鸥竟飞.为什么?因为春季招聘,无论是应届生,还是职场老鸟,都在摩拳擦掌,秣马厉兵,准备在面试场上一较身手,既分高下,也决Offer,本次我们打响春招第一炮,躬身入局,让 ...

  3. LG P3768 简单的数学题

    \(\text{Problem}\) 求 \[\left(\sum_{i=1}^n \sum_{j=1}^n i j \gcd(i,j)\right) \bmod p \] \(n \le 10^{1 ...

  4. 免杀之:C# XOR Shellcode

    免杀之:C# XOR Shellcode 目录 免杀之:C# XOR Shellcode 1 环境准备 2 制作Shellcode后门文件 2.1 编译环境准备 2.2 生成XORKryptor程序 ...

  5. U-Boot-基础概念与学习分享

    U-Boot 基础概念与学习分享 Board: rockchip-px30, armv8, Cortex-A35 U-Boot: rockchip-linux/u-boot, branch next- ...

  6. 关于 Knex update 语句报错:Undefined binding(s) detected when compiling UPDATE

    下图是详细的报错截图,我敢保证前端传递的数据一个不漏,但还是报我没有绑定对应的字段: 官方文档的使用案例基本上都是where 子句在 update 语句之前.但,select 语句的 where 子句 ...

  7. 编程基础与python介绍

    思维导图 https://gitee.com/starry-tong/python-data/blob/pyimage/day02.png 1.计算机内部存储数据的原理 2.编程语言的发展史 3.py ...

  8. N63050 第二周运维作业

    1.显示/etc目录下,以非字母开头,后面跟了一个字母以及其它任意长度任意字符的文件或目录 1 [root@centos8 etc]#touch 5a.txt 9a.txt 2 [root@cento ...

  9. 微信内h5调用支付

    在做公众号商城的时候,需要用到调用微信支付,这是微信官方文档教程 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&in ...

  10. BDD测试和TDD测试

    BDD测试和TDD测试 TDD TDD是测试驱动开发(Test-Driven Development)的缩写,是敏捷开发中的一项测试技术,也是一种设计方法论.她的大概思路是:先针对每个功能点抽象出接口 ...