@react-native-clipboard/clipboard

[![构建状态][build-badge]][build] [![版本][version-badge]][package] ![支持 macOS、iOS、Android 和 Windows][support-badge] [![MIT 许可证][license-badge]][license] [![精简核心徽章][lean-core-badge]][lean-core-issue]

适用于 macOS、iOS、Android 和 Windows 的 React Native 剪贴板 API。

macOS	iOS	Android	Windows
<img src ="https://user-images.githubusercontent.com/717674/90572309-8a381100-e168-11ea-92cb-ecad8e333d8f.png" width="320"/>	<img src ="https://user-images.githubusercontent.com/6936373/73284520-0ce29880-4238-11ea-9d0e-2061b2d6f17a.png" width="320"/>	<img src ="https://user-images.githubusercontent.com/6936373/73284517-0ce29880-4238-11ea-96c7-5a6337c43da5.png" width="320"/>	<img src="https://yellow-cdn.veclightyear.com/ab5030c0/7dad9461-cbea-44f2-b33b-cc387fa67b5b.png" width="320" />

入门

使用 Yarn 安装库：

yarn add @react-native-clipboard/clipboard

或使用 npm：

npm install --save @react-native-clipboard/clipboard

链接

React Native v0.60+

对于 iOS，使用 cocoapods 链接包。

运行以下命令：

$ npx pod-install

对于 Android，构建时会自动链接包。

<details> <summary>适用于 React Native 0.59 或更早版本</summary>

React Native <= 0.59

运行以下命令链接包：

$ react-native link @react-native-clipboard/clipboard

对于 iOS，确保安装 pod 文件。

cd ios && pod install && cd ..

或者你可以按照说明手动链接项目

升级到 React Native 0.60+

新版 React Native 带有 autolinking 功能，可自动链接项目中的原生模块。为确保其正常工作，请确保先取消链接 Clipboard：

$ react-native unlink @react-native-clipboard/clipboard

</details>

从核心 `react-native` 模块迁移

当剪贴板 API 从 React Native 核心拆分出来时创建了此模块。要迁移到此模块，你需要按照上述安装说明进行操作，然后将导入从：

import {Clipboard} from 'react-native';

改为：

import Clipboard from '@react-native-clipboard/clipboard';

示例

import React, {useState} from 'react';
import {
  SafeAreaView,
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';

const App = () => {
  const [copiedText, setCopiedText] = useState('');

  const copyToClipboard = () => {
    Clipboard.setString('hello world');
  };

  const fetchCopiedText = async () => {
    const text = await Clipboard.getString();
    setCopiedText(text);
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <TouchableOpacity onPress={copyToClipboard}>
          <Text>点击此处复制到剪贴板</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={fetchCopiedText}>
          <Text>查看复制的文本</Text>
        </TouchableOpacity>

        <Text style={styles.copiedText}>{copiedText}</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  copiedText: {
    marginTop: 10,
    color: 'red',
  },
});

export default App;

参考

方法

Clipboard

`getString()`

static getString()

获取字符串类型的内容，此方法返回一个 Promise，因此你可以使用以下代码获取剪贴板内容

async _getContent() {
  var content = await Clipboard.getString();
}

`getStrings()`

static getStrings()

(仅适用于iOS) 获取字符串数组类型的内容，此方法返回一个Promise，因此你可以使用以下代码获取剪贴板内容

async _getContent() {
  var content = await Clipboard.getStrings();
}

`setString()`

static setString(content)

设置字符串类型的内容。你可以使用以下代码设置剪贴板内容

_setContent() {
  Clipboard.setString('hello world');
}

参数

名称	类型	是否必需	描述
content	string	是	要存储在剪贴板中的内容

`setStrings()`

static setStrings(content)

(仅适用于iOS) 设置字符串数组类型的内容。你可以使用以下代码设置剪贴板内容

_setContent() {
  Clipboard.setStrings(['hello world', 'second string']);
}

参数

名称	类型	是否必需	描述
content	string[]	是	要存储在剪贴板中的内容

`hasString()`

static hasString()

返回剪贴板是否有内容或为空。可以检查剪贴板是否有内容，而不会触发iOS 14+的粘贴板通知

`hasURL()`

static hasURL()

(仅适用于iOS) 返回剪贴板是否有URL内容。可以检查剪贴板是否有URL内容，而不会触发iOS 14+的粘贴板通知

`hasNumber()`

static hasNumber()

(仅适用于iOS 14+) 返回剪贴板是否有数字(UIPasteboardDetectionPatternNumber)内容。可以检查剪贴板是否有数字内容，而不会触发iOS 14+的粘贴板通知

`hasWebURL()`

static hasWebURL()

(仅适用于iOS 14+) 返回剪贴板是否有网址(UIPasteboardDetectionPatternProbableWebURL)内容。可以检查剪贴板是否有网址内容，而不会触发iOS 14+的粘贴板通知

useClipboard

useClipboard是Clipboard模块的实用钩子。data包含存储在剪贴板中的内容。

import React, {useEffect} from 'react';
import {Text} from 'react-native';
import {useClipboard} from '@react-native-clipboard/clipboard';

export const HooksSample = () => {
  const [data, setString] = useClipboard();

  useEffect(() => {
    setString('hello world');
  }, []);

  return <Text>{data}</Text>;
};

`getImage()`

static getImage()

获取base64字符串类型的图像内容，此方法返回一个Promise，因此你可以使用以下代码获取剪贴板内容（仅适用于Android）

async _getContent() {
  var content = await Clipboard.getImage();
}

模拟Clipboard

如果你使用jest作为测试运行器，你需要为剪贴板设置一个模拟，因为在使用Jest进行测试时，NativeModules将是未定义的。

在项目根目录创建一个jest.setup.js文件，并设置以下内容来模拟Clipboard：

import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock.js';

jest.mock('@react-native-clipboard/clipboard', () => mockClipboard);