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

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;
           

效果：