关闭

[React Native]访问操作系统剪贴板 Clipboard

2270人阅读 评论(0) 收藏 举报
分类:

我们之前学习了TextInput组件, 有时候我们需要在TextInput组件中复制或者粘贴一些文字。
React Native为开发者提供了 Clipboard API,Clipboard 组件可以在iOS和Android的剪贴板中读写内容。目前还只支持获取或者存放字符串。

主要方法

static getString()
获取剪贴板的文本内容,返回一个Promise(后面会介绍)
你可以用下面的方式来调用。
async _getContent() { var content = await Clipboard.getString(); }

static setString(content: string)
设置剪贴板的文本内容。你可以用下面的方式来调用。
_setContent() { Clipboard.setString('hello world'); }

官方例子

代码比较简单, 直接展示官方例子:

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    Clipboard
} from 'react-native';

class AwesomeProject extends Component {
    state = {
        content: 'Content will appear here'
    };
    //异步函数 箭头函数不需要绑定this了
    _setClipboardContent = async () => {
        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',marginTop:100}}>
                    Tap to put "Hello World" in the clipboard
                </Text>
                <Text style={{color: 'red', marginTop: 20}}>
                    {this.state.content}
                </Text>
            </View>
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

运行结果:

更多精彩请关注微信公众账号likeDev
这里写图片描述

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

React-Native项目中应用剪贴板复制粘贴操作

前言很多APP中都会用到剪贴板的操作,对于React-Native来讲同样也可以实现这个功能。方法Clipboard组件可以在iOS和Android的剪贴板中读写内容。常用API1.得到复制内容sta...
  • jiangbo_phd
  • jiangbo_phd
  • 2017-02-10 17:19
  • 3278

React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用

转载请标明出处:http://blog.csdn.net/u010046908/article/details/50781360 本文出自:【李东的博客】最近一直非常的关注react-native的开...
  • u010046908
  • u010046908
  • 2016-03-04 20:06
  • 17240

React Native优秀的第三方插件(Android & iOS)

1.https://github.com/aroth/react-native-uploader 文件上传 图片.gif 2.https://github.com/obla...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-27 14:48
  • 3614

React Native之ScrollView通过map()方法动态加载数组

大家好,时隔几天,我又开始更新新的博文了,最近由于有新的学习任务,比较头疼,加上刚刚过去的清明假期去长城锻炼身体了(微信公众号有彩蛋哦,欢迎关注),闲置了几天时间,所以今天赶紧的再来一发。上次写的关于...
  • woshizisezise
  • woshizisezise
  • 2016-04-06 10:03
  • 11498

react-native集成超级强大的图表工具native-echarts

闲话不多说,先到上动态图让大家看看。使用起来超级简单,完美适配ios和android chart.gif 简单介绍一下: 1.苹果 橘子 这个可以根据legend这个属性...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-31 21:59
  • 5538

react native 性能优化基础 - 官方文档

使用React Native的一个重要原因就是达到60FPS的刷新,这看起来跟本地APP是一样的。在可能的情况下,我们尽量完善ReactNative的性能,使你只关注APP的逻辑,而可以不用管性能的优...
  • cexo425
  • cexo425
  • 2016-08-01 17:09
  • 7963

ReactNative开发——Navigation的使用

ReactNative开发——Navigation的使用React Native 0.43之前 ‘react-native’包里面,但0.43之后了’rea移除了rect-native’。网上的大部分...
  • a992036795
  • a992036795
  • 2017-06-16 10:52
  • 3517

Andriod React Native 样式表中可用样式属性

写了这么多篇Android React Native的博文,基本上把复杂的东西都搞定了,接下来来看看一些轻松的东西,和布局有关,就是css样式,那么一个View可以设置哪些css样式呢,是和web中的...
  • sbsujjbcy
  • sbsujjbcy
  • 2015-11-24 18:58
  • 22071

React Native常用组件样式总结

作为一个JS、CSS、RN新手,总是会遇到各种样式。在不知道样式有些什么的情况下难以很好的绘制布局。所以这里整理了一下几个常用组件的样式。
  • violetjack0808
  • violetjack0808
  • 2016-05-06 10:33
  • 13853

ReactNative 代码调试方法

在iOS开发中是如何调试程序的?有些时候会通过NSLog进行代码结果的打印,这种方式对应到RN的开发中,就是通过alert()或者通过console.log()把需要的内容弹出或者将结果打印到控制台上...
  • yayayaya20122012
  • yayayaya20122012
  • 2016-04-05 20:17
  • 22087
    个人资料
    • 访问:214220次
    • 积分:2581
    • 等级:
    • 排名:第16321名
    • 原创:74篇
    • 转载:1篇
    • 译文:0篇
    • 评论:238条
    关于我
    我的新书
    《爱上Android》已经出版
    本书绝不中庸,全是实用技术

    购买地址

    京东 天猫
    博客专栏
    最新评论