首页 > 其他 > 详细

ReactNative: 剪贴板Clipboard的使用

时间:2020-01-11 16:33:56      阅读:175      评论:0      收藏:0      [点我收藏+]

一、介绍

“剪贴板Clipboard”为用户提供了一个界面,可在iOS和Android上从访问系统的剪贴板设置和获取内容。

 

二、API

Clipboard提供的API相当简单,只有两个方法,一个是设置内容到剪贴板,另一个则是从剪贴板获取设置的内容。如下所示:

//设置内容到剪贴板
setString(content: string) {
    Clipboard.setString(content);
}

//获取剪贴板上的内容,返回的是一个Promise异步函数
getString(): Promise<string> {
    return Clipboard.getString();
}

 

三、使用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from react;

import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    TouchableHighlight,
    Clipboard
} from react-native;

export default class ReactNativeDemo extends Component {

    //异步处理
    _handleClipboardContent = async () => {

        //设置内容到剪贴板
        Clipboard.setString("Welcome to you!");

        //从剪贴板获取内容
        Clipboard.getString().then( (content)=>{
            alert(content: +content)
        }, (error)=>{
            console.log(error:+error);
        })
    };

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <TouchableHighlight onPress={this._handleClipboardContent}>
                    <Text style={{color:red,fontSize:30}}>Click</Text>
                </TouchableHighlight>
            </View>
        );
    }
}



const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: white
    },
    center: {
        alignItems: center,
        justifyContent: center,
    }
});

AppRegistry.registerComponent(ReactNativeDemo, () => ReactNativeDemo);

点击按钮,获取剪贴板内容如下:

技术分享图片

ReactNative: 剪贴板Clipboard的使用

原文:https://www.cnblogs.com/XYQ-208910/p/12179991.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!