React-Native項目中應用剪貼板復制粘貼操作

2019-11-09 14:45:02

字體：大中小

來源：轉載

供稿：網友

前言

很多APP中都會用到剪貼板的操作，對于React-Native來講同樣也可以實現(xiàn)這個功能。

方法

Clipboard組件可以在iOS和Android的剪貼板中讀寫內容。

常用API

1.得到復制內容

static getString()

獲取剪貼板的文本內容，返回一個PRomise你可以用下面的方式來調用。

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

這里async和await為ES7的語法，變異步為同步。

2.拷貝內容到剪貼板

static setString(content: string)

設置剪貼板的文本內容。你可以用下面的方式來調用。

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

示例

'use strict';var React = require('react');var ReactNative = require('react-native');var { Clipboard, View, Text,} = ReactNative;var ClipboardExample = React.createClass({ getInitialState() { return { content: 'Content will appear here' }; }, async _setClipboardContent(){ Clipboard.setString('Hello World'); try { var content = await Clipboard.getString(); this.setState({content}); } catch (e) { this.setState({content:e.message}); } }, render() { return ( <View> <Text onPress={this._setClipboardContent} style={{color: 'blue'}}> Tap to put "Hello World" in the clipboard </Text> <Text style={{color: 'red', marginTop: 20}}> {this.state.content} </Text> </View> ); }});exports.title = 'Clipboard';exports.description = 'Show Clipboard contents.';exports.examples = [ { title: 'Clipboard.setString() and getString()', render() { return <ClipboardExample/>; } }];

注：此例子來源于官方示例，僅供參考學習！

上一篇：Dagger2學習筆記之Qualifier

下一篇：scrollView加載大量圖片性能優(yōu)化