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)