React Native 中文文档 - Clipboard 组件 - React Native 中文文档

React Native 中的 Clipboard 组件用于在 Android 和 iOS 中读写 剪贴板 的内容。

也就是说，这个组件时全平台通用的。提供了统一的接口来读写移动手机中的剪贴板

什么是剪贴板

剪贴板就是复制、黏贴、剪贴三大功能的基础组件。

剪贴板实现了在一个地方复制或者剪贴，在另一个输入框中实现粘贴的功能的最基础的组件

剪贴板中的内容都是以字符串形式存在的，如果你要存储一个非字符串的数据，可以使用 [JSON.stringify] 函数转化为字符串

注意

Clipboard 组件是一个非可视化组件，它只是一组简单的 JavaScript 函数而已，能够用来实现复制、黏贴、剪贴作用的最基础的组件

导入组件

import { Clipboard } from 'react-native'

提供的方法

方法	说明
`Clipboard.getString()`	往剪贴板中写入内容
`Clipboard.setString()`	从剪贴板中读取内容

需要注意的是，getString() 和 setString() 都是异步操作，返回的是一个 Promise

范例

下面的范例，当我们点击 写入剪贴板 时往剪贴板中输入内容，当我们点击 读取剪贴板 时从 剪贴板中读取 内容

import React, {Component} from 'react';
import {Text,View,TouchableHighlight,Alert} from 'react-native';

export default class App extends Component{

  async getContent() {
    var content = await Clipboard.getString();
    Alert.alert("剪贴板内容",content)
  }

  setContent() {
    Clipboard.setString('简单教程 https://www.twle.cn/');
    }

  render() {
    return (
      <View>
        <View style={{margin:20}}>
           <TouchableHighlight onPress={() => setContent()}>
                <Text>写入剪贴板</Text>
            </TouchableHighlight>
        </View>
        <View style={{margin:20}}>
            <TouchableHighlight onPress={() => getContent()} >
                <Text>读取剪贴板</Text>
            </TouchableHighlight>
        </View>
      </View>
    );
  }
}