复制文本后如何向用户显示"text is copied"？

Question

文本复制完成后如何向用户显示"text is copied"？

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>

Answer 1

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

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>

然后你可以观察状态，看看是否有任何复制和条件渲染 "Text is copied" 消息：

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

Answer 2

你可以这样做：

    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>

Answer 3

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

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

React Native Clipboard API with Animated toast message component

Support both Android and iOS | Used react native Clipboard | Toast by calling api

复制文本后如何向用户显示"text is copied"？

How to display "text is copied" to the user after the text has been copied?

react-native

native-base

touchableopacity