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;
           

效果：