在React Native中如何复制文本到剪贴板？

Question

在React Native中如何复制文本到剪贴板？

41

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

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

我是一个新手，非常感谢您的帮助。

- user10738477

6个回答

27

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

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

- ArmX

这不是针对上述问题的正确解决方案。但如果您需要一段可以复制的文本，这是一个通用的好方法。 - Hannibal B. Moulvad

7

我猜很多人都在使用Expo，那里需要另一个库。

expo install expo-clipboard

import * as Clipboard from 'expo-clipboard';

// Then just do like in the accepted solution:
Clipboard.setString('mail@mail.com');

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

- Ferran Maylinch

错误：找不到本地模块“ExpoClipboard” - IMPixel

4

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

被替换成了 react-native-community/clipboard

- Rajesh N

1

官方的 Clipboard 已经被弃用了。现在你应该使用社区库。 - Ferran Maylinch

1

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>

- serhendi

-1

编辑：显然已过时，请参见评论和置顶答案。

所以，你已经使用Text将文本显示在屏幕上了，现在你想让用户能够复制它；我可以想象三种方法来实现这个目标：

如何在React Native中使文本可选（并可复制）？
如何在React Native中显示“复制弹出窗口”？
如何在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}
/>

- Leonard Pauli

剪贴板从'react-native'中已经被弃用。我们应该使用社区包代替：@react-native-clipboard/clipboard。 - Raphael Pinel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fayeed · Accepted Answer

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

以下是如何使用它的方法：

import Clipboard from '@react-native-clipboard/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>