复制文本后如何向用户显示“文本已复制”？答案

【问题标题】：How to display "text is copied" to the user after the text has been copied?复制文本后如何向用户显示“文本已复制”？
【发布时间】：2020-01-16 05:28:33
【问题描述】：

文本被复制后如何向用户显示“文本被复制”？

const dataArray = [ { title: "Invoice Reference Number", content:QRCODE_SAMPLE.Irn } ];

<TouchableOpacity activeOpacity={1}
    onPress={() => Clipboard.setString(QRCODE_SAMPLE.Irn)}>   
    <Accordion style={{paddingTop:10,paddingBottom:50,backgroundColor:'#E0DDDD'}}dataArray={dataArray} expanded={1}>
    </Accordion>
</TouchableOpacity>

【问题讨论】：

您可以使用 toast 这样做
@KaranMehta 你能详细说明一下吗？
当字符串存储在剪贴板中时，您应该向用户显示 toast 以确认它们大致相同
如果你不明白，请告诉我，我会告诉你怎么做
是的，toast 对我有用，但是如何在单个 onPress 中同时包含 Clipboard.setString(QRCODE_SAMPLE.Irn)} 和 Toast.show？

标签： react-native native-base touchableopacity

【解决方案1】：

你可以这样做：

    import {ToastAndroid} from 'react-native';

创建这个函数：

    onCopyPressed(){

    Clipboard.setString(QRCODE_SAMPLE.Irn);
    ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
    }

然后像这样调用那个函数：

const dataArray = [ { title: "Invoice Reference Number", content:QRCODE_SAMPLE.Irn } ];
<TouchableOpacity activeOpacity={1}
        onPress={this.onCopyPressed.bind(this)}>   
        <Accordion style={{paddingTop:10,paddingBottom:50,backgroundColor:'#E0DDDD'}}dataArray={dataArray} expanded={1}>
        </Accordion>
    </TouchableOpacity>

【讨论】：

【解决方案2】：

我以前从未使用过剪贴板，但我认为您的代码可以正常工作，那么：

const [clipboardString, setClipboardString] = useState('');

handleClipboardAction = (str) => () => {
    Clipboard.setString(str);
    setClipboardString(setClipboardString)
}

<TouchableOpacity activeOpacity={1}
    onPress={handleClipboardAction(str)}>   
    <Accordion style={{paddingTop:10,paddingBottom:50,backgroundColor:'#E0DDDD'}}dataArray={dataArray} expanded={1}>
    </Accordion>
</TouchableOpacity>

然后您可以观察状态以查看是否有任何内容被复制并有条件地呈现“文本已复制”消息：

{clipboardString.length > 0 && <Text>Text is copied</Text>}

【讨论】：

【解决方案3】：

最简单的方法是使用在它们之间混合的包：

https://www.npmjs.com/package/react-native-clipboard-toast

React Native Clipboard API 与动画 toast 消息组件

同时支持安卓和iOS |使用 react native 剪贴板 |敬酒调用api

【讨论】：