环境:
"react": "17.0.2",
"react-native": "0.66.4",
"@react-native-clipboard/clipboard": "^1.10.0"
硬件:MacBook Pro
功能:实现文本复制
搜索百度大部分是在react-cative里面引用Clipboard,但是这个方法现在已经弃用,调用会报错
所以需要额外引用组件@react-native-clipboard/clipboard,调用方法和原来也是一样只是额外需要安装:
yarn add @react-native-clipboard/clipboard
or npm:
npm install --save @react-native-clipboard/clipboard
然后组件调用
import React, {useState} from 'react';
import {
SafeAreaView,
View,
Text,
TouchableOpacity,
StyleSheet,
} from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';
const App = () => {
const [copiedText, setCopiedText] = useState('');
const copyToClipboard = () => {
Clipboard.setString('hello world');
};
const fetchCopiedText = async () => {
const text = await Clipboard.getString();
setCopiedText(text);
};
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.container}>
<TouchableOpacity onPress={copyToClipboard}>
<Text>Click here to copy to Clipboard</Text>
</TouchableOpacity>
<TouchableOpacity onPress={fetchCopiedText}>
<Text>View copied text</Text>
</TouchableOpacity>
<Text style={styles.copiedText}>{copiedText}</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
copiedText: {
marginTop: 10,
color: 'red',
},
});
export default App;
完工。
附上npm官方文档:@react-native-clipboard/clipboard - npm
里面有更详细的其他方法说明