前言
很多APP中都会用到剪贴板的操作,对于React-Native来讲同样也可以实现这个功能。
方法
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/>;
}
}
];
注: 此例子来源于官方示例,仅供参考学习!