返回 导航

React / React Native

hangge.com

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)

回到顶部