前言
很多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/>;
}
}
];
注: 此例子来源于官方示例,仅供参考学习!
作者:jiangbo_phd 发表于2017/2/10 17:19:30 原文链接
阅读:7 评论:0 查看评论