React Native - 访问操作系统剪贴板(Clipboard API的使用)
作者:hangge | 2017-09-15 08:10
React Native 为开发者提供了 Clipboard API,让开发者可以访问设备操作系统中剪贴板里的内容,或者往剪贴板里存放内容。
1,Clipboard API 介绍
Clipboard API 目前还只支持获取或者存放字符串,它使用比较简单,只有两个静态函数:
- setString:向剪贴板中存放字符串
- getString:从剪贴板中取出字符串
2,样例效果图
(1)点击“存入剪贴板”按钮,可以将指定的字符串存入到系统剪贴板中。
(2)点击“读取剪贴板”按钮,可以从系统剪贴板中读取出数据,并显示在界面上。

3,样例代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
View,
Text,
Clipboard
} from 'react-native';
export default class Main extends Component {
constructor(props) {
super(props);
this.state = {textFromClipboard:''};
}
//从剪贴板中读取字符串
pasteFromClipboard() {
Clipboard.getString().then(
(textFromClipboard) => {
this.setState({textFromClipboard});
}
).catch(
(error) => {
console.log("从剪贴板中读取数据错误!");
console.log(error);
}
);
}
//向剪贴板中存入字符串
copyToClipBoard() {
Clipboard.setString('欢迎访问 hangge.com');
}
render() {
return (
<View style={styles.container}>
<View style={styles.flexDirection}>
<Text style={styles.buttonStyle} onPress={this.copyToClipBoard.bind(this)}>
存入剪贴板
</Text>
<Text style={styles.buttonStyle} onPress={this.pasteFromClipboard.bind(this)}>
读取剪贴板
</Text>
</View>
<Text style={styles.info}>
{this.state.textFromClipboard}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
marginTop:40,
alignItems:'center',
},
flexDirection:{
flexDirection:'row'
},
buttonStyle:{
textAlign:'center',
color:'white',
margin:10,
backgroundColor:'#4CA300',
width:140,
fontSize:23
},
info:{
fontSize:20,
margin:10
},
});
AppRegistry.registerComponent('HelloWorld', () => Main);
全部评论(0)