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;

效果：