react-native系列(25)API补充篇：活动状态+设备返回键与振动+计时器+剪切板相关功能

╰+攻爆jí腚メ 2021-09-18 12:08 103阅读 0赞

# AppState应用状态 #

AppState用于检测当前APP应用是否在活动中。可以通过属性currentState获取：

AppState.currentState

如果间监听活动状态，可以使用：

state = {
        appState: AppState.currentState
    }
    
    componentDidMount() {
        AppState.addEventListener('change', this._handleAppStateChange);
    }
    
    componentWillUnmount() {
        AppState.removeEventListener('change', this._handleAppStateChange);
    }
    
    _handleAppStateChange = (nextAppState) => {
        if (nextAppState === 'active') {
            console.log('状态已经回到应用');
        }else{
            console.log('状态不在应用中');
        }
        this.setState({appState: nextAppState});
    }

# BackHandler设备返回键 #

只对android有效，表示从应用活动状态中返回到手机桌面。要实现返回监听，可以用：

componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    }
    
    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
    }
    
    handleBackPress = () => {
        console.log('设备返回键被点击');
        // BackHandler.exitApp(); // 退出APP
        return true; // 默认返回false。当为true时表示点击返回键时不会返回到手机桌面
    }

在处理监听结果时，如果返回true，则表示依然停留在应用中，不会返回到手机桌面。默认为false。

# Vibration设备振动 #

Vibration.vibrate(time, loop);函数用于调起设备的振动功能。time可以是一个整数，表示振动时长(毫秒)，ios不可设置；也可以是一个整数数组，表示间隔振动，loop为boolean值，表示是否循环。这里有一点，相同的参数在android和ios呈现出来的振动效果不同。

当time为一个整数时：

Vibration.vibrate(10000);
    // Android: 振动10秒
    // iOS: 持续时间不可配置，定时振动（约500ms）

当time为整数数组时：

Vibration.vibrate([1000, 2000, 3000]);
    // Android: 等待1秒、振动2秒、等待3秒
    // iOS: 等待1秒、振动、等待2秒、振动、等待3秒、振动

当循环振动时：

Vibration.vibrate([1000, 2000, 3000], true);
    // Android: 等待1秒、振动2秒、等待3秒、等待1秒、振动2秒...
    // iOS: 等待1秒、振动、等待2秒、振动、等待3秒、振动、等待1秒、振动...

停止振动：

Vibration.cancel();

# 计时器 #

有setTimeout和setInterval，用法跟在浏览器上是一样的。在RN中多了一种setImmediate，表示在本代码块执行完成后触发。通常用法：

_onTimeoutPress = () => {
        this.timeout = setTimeout(() => {
            console.log('setTimeout!!!');
        }, 3000);
    }
    
    _onIntervalPress = () => {
        this.interval = setInterval(() => {
            console.log('setInterval!!!');
        }, 3000);
    }
    
    _onImmediatePress = () => {
        // 则会在当前 JavaScript 执行块结束的时候执行，就在将要发送批量响应数据到原生之前。
        this.immediate = setImmediate(()=> {
            console.log('setImmediatel!!!');
        });
    }
    
    componentWillUnmount() {
        this.timeout && clearTimeout(this.timeout);
        this.interval && clearInterval(this.interval);
        this.immediate && clearImmediate(this.immediate);
    }

setImmediate()是将事件插入到事件队列尾部，主线程和事件队列的函数执行完成之后立即执行setImmediate指定的回调函数，和setTimeout(fn,0)的效果差不多，但是当他们同时在同一个事件循环中时，setImmediate将会先执行。

console.log(1);
    
    this.timeout = setTimeout(() => {
        console.log('setTimeout!!!'); // 后打印
    }, 0);
    
    console.log(2);
    
    this.immediate = setImmediate(()=> {
        console.log('setImmediatel!!!'); // 先打印
    });
    
    console.log(3);

打印结果是 1,2,3,setImmediatel!!!,setTimeout!!!

# 剪切板Clipboard #

Clipboard有两个函数，分别是向剪切板设置字符串和获取剪切板内容。

Clipboard.setString(string); // 向剪切板设置字符串
    Clipboard.getString(); // 获取剪切板内容

应用代码：

import React from 'react';
    import { View, Clipboard, Button, Alert } from 'react-native';
    
    // 剪切板
    class ClipboardAPI extends React.Component {
    
        _setContent() {
            Clipboard.setString('hello world');
        }
    
        async _getContent() {
            var content = await Clipboard.getString();
            Alert.alert('提示',content);
            return content;
        }
    
        render(){
            return(
                <View>
                    <Button 
                        onPress={()=>{
                            this._setContent();
                        }}
                        title='setContent'
                    />
                    <Button 
                        onPress={()=>{
                            this._getContent();
                        }}
                        title='getContent'
                    />
                </View>
            );
        }
    }
    
    export default ClipboardAPI;

效果：

![20190315173146745.gif][]

[20190315173146745.gif]: /images/20210812/bdff1059d2804ef385fa735d3aaff0fc.png