React-Native项目中应用剪贴板复制粘贴操作
发布时间:2020-12-15 07:34:23 所属栏目:百科 来源:网络整理
导读:前言 很多APP中都会用到剪贴板的操作,对于React-Native来讲同样也可以实现这个功能。 方法 Clipboard组件可以在iOS和Android的剪贴板中读写内容。 常用API 1.得到复制内容 static getString() 获取剪贴板的文本内容,返回一个Promise你可以用下面的方式来调
前言很多APP中都会用到剪贴板的操作,对于React-Native来讲同样也可以实现这个功能。 方法Clipboard组件可以在iOS和Android的剪贴板中读写内容。 常用API1.得到复制内容 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/>;
}
}
];
注: 此例子来源于官方示例,仅供参考学习! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |