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

Question

我想集成一个小文本（我的电子邮件地址），但我希望用户可以复制此文本。我想到了一个按钮，当我们点击它时，电子邮件地址就会被复制，并且可以粘贴到应用程序之外。如何做到这一点？

<View>
<Text style={{color: 'red', fontSize: 14 , fontFamily:'Arial', fontStyle: 'bold', textAlign: 'center', marginTop: 3, marginLeft: 25, marginBottom: 17}}> 
             [email protected]
</Text></View>

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

Answer 1

您可以使用来自@react-native-community的

Clipboard。

使用方法如下：

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

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

Answer 2

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

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

Answer 3

因为我猜人们可能会使用expo，所以你需要另一个库。

expo install expo-clipboard

import * as Clipboard from 'expo-clipboard';

// Then just do like in the accepted solution:
Clipboard.setString('[email protected]');

解决方案取自： https://github.com/react-native-clipboard/clipboard/issues/110#issuecomment-931340618

Answer 4

import { Button, Clipboard } from 'react-native'

替换为

react-native-community/clipboard

Answer 5

法耶德是对的。您可以使用剪贴板供用户复制字符串。

此外，您还可以轻松地为组件提供剪贴板。正如法耶德上面所做的那样

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

Answer 6

对于那些在 Expo 中没有此模块的人，请尝试通过 eas 构建开发版本

Answer 7

编辑：显然已经过时，请参阅评论和最佳答案。

---

因此，您设法使用

Text

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

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

让我们重点讨论最后一个。我们可以进一步细分：

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

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

• https://facebook.github.io/react-native/docs/button.html
• https://facebook.github.io/react-native/docs/clipboard

...相关代码片段：

import { Button, Clipboard } from 'react-native'
...
const email = '[email protected]'
const copyIt = ()=> Clipboard.setString(email)
...
<Button
  onPress={copyIt}
  title={email}
/>