如何在 react-native 中将文本复制到剪贴板？答案

【问题标题】：How to copy text to clipboard in react-native?如何在 react-native 中将文本复制到剪贴板？
【发布时间】：2019-11-23 11:40:02
【问题描述】：

我想整合一个小文本（我的电子邮件地址），但我希望用户可以复制这个文本。我想到了一个按钮，当我们点击它时，电子邮件地址是复制的，可以在应用程序之外过去。如何做到这一点？

<View>
<Text style={{color: 'red', fontSize: 14 , fontFamily:'Arial', fontStyle: 'bold', textAlign: 'center', marginTop: 3, marginLeft: 25, marginBottom: 17}}> 
             mail@mail.com
</Text></View>

我是新手，任何帮助将不胜感激。

【问题讨论】：

标签： javascript react-native button text onclick

【解决方案1】：

您可以使用Clipboard from @react-native-community。

你可以这样使用它：

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

<TouchableOpacity onPress={() => Clipboard.setString('mail@mail.com')}>
  <View>
    <Text style={{color: 'red', fontSize: 14 , fontFamily:'Arial', fontStyle: 'bold', textAlign: 'center', marginTop: 3, marginLeft: 25, marginBottom: 17}}> 
                mail@mail.com
    </Text>
  </View>
</TouchableOpacity>

【讨论】：

谢谢，但我有一个错误，我认为它必须来自可触摸的不透明度？
ReferenceError：ReferenceError：找不到变量：TouchableOpacity
我已经编辑了我的答案，别忘了导入TouchableOpacity。
剪贴板已从 react-native 核心中删除，应从 @react-native-community/clipboard 安装

【解决方案2】：

欢迎来到stackoverflow！请阅读https://stackoverflow.com/help/how-to-ask 学习如何提出好的问题；通常情况下，提出问题的过程（如果做得好）会引导你找到答案！

所以，您设法使用Text 将文本显示在屏幕上，现在您希望用户能够复制它；我可以想象三种方法：

如何在 react-native 中使文本可选择（和可复制）？
如何在 react-native 中显示“复制弹出框”？
如何在 react-native 中点击按钮时将文本复制到剪贴板？

让我们专注于最后一个。我们可以进一步分解：

如何在 react-native 中制作按钮？
如何在点击按钮时执行功能？（在本机反应中）
如何以编程方式将文本复制到剪贴板？（在本机反应中）

如果我们用谷歌搜索这些短语，我们会找到相关文档：

...用相关的代码：

import { Button, Clipboard } from 'react-native'
...
const email = 'hello@example.com'
const copyIt = ()=> Clipboard.setString(email)
...
<Button
  onPress={copyIt}
  title={email}
/>

【讨论】：

'react-native' 中的剪贴板已被弃用。我们应该改用社区包：@react-native-clipboard/clipboard

【解决方案3】：

fayeed 是对的。您可以使用剪贴板让用户复制字符串。

此外，您也可以轻松地为组件提供剪贴板。就像上面fayeed所做的那样

<Text 
onPress={()=>Clipboard.setString('mail@mail.com')}
style={{color: 'red', fontSize: 14 , fontFamily:'Arial', fontStyle: 'bold', textAlign: 'center', marginTop: 3, marginLeft: 25, marginBottom: 17}}> 
                mail@mail.com
    </Text>

【讨论】：

【解决方案4】：

import { Button, Clipboard } from 'react-native' 替换为react-native-community/clipboard

【讨论】：

【解决方案5】：

将 Text 组件的 selectable 属性设置为 true，长按文本内容将被复制到剪贴板。

<Text selectable={true}>
  Your text
</Text>

【讨论】：

这不是上述问题的正确解决方案。但这是一个通用的好解决方案，如果您需要一段可以从中复制的文本。