React Native 其他组件之 Clipboard

Clipboard组件可以在 iOS 和 Android 的剪贴板中读写内容。

方法

• getString()
  获取剪贴板的文本内容。

• setString()
  设置剪贴板的文本内容。

实例

1. 示例代码

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Clipboard
} from 'react-native';

export default class App extends Component { 
  constructor(props) {
    super(props);
    this.state = { textFromClipboard: '' };
  }

  //从剪贴板种读取字符串
  pasteFromClipboard() { 
    Clipboard.getString().then(
      (textFromClipboard) => { 
        this.setState({ textFromClipboard })
      }
    ).catch(
      (error) => {
        console.log(error);
      }
    )
  }

  //从剪贴板中存入字符串
  copyToClipboard() { 
    Clipboard.setString('欢迎访问我的简书。');
  }
  render() { 
    return (
      <View style={styles.container}>
        <View style = {styles.second}>
          <Text
            style={styles.textStyle}
            onPress = {this.copyToClipboard.bind(this)}
          >存入剪贴板</Text>

          <Text
            style={styles.textStyle}
            onPress={this.pasteFromClipboard.bind(this)}
          >读取剪贴板</Text>
        </View>

        <Text style={styles.info}>
          {this.state.textFromClipboard}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop:40
  },

  second: {
    flexDirection:'row'
  },

  textStyle: {
    textAlign: 'center',
    color: 'white',
    margin: 10,
    backgroundColor: '#4CA300',
    width: 140,
    fontSize: 20
    
  },

  info: {
    fontSize: 18,
    margin:10
  }
  
})

2. 效果图

clipboard.jpg