react native AppState 使用详解

最新推荐文章于 2024-05-31 22:32:14 发布

老孟Flutter

最新推荐文章于 2024-05-31 22:32:14 发布

阅读量3.7k

点赞数

分类专栏： react native 学习之旅文章标签： react native AppState

本文链接：https://blog.csdn.net/mengks1987/article/details/72821398

版权

react native 学习之旅专栏收录该内容

44 篇文章 8 订阅

订阅专栏

AppState：当前app的状态，是在前台还是在后台。

active：应用正在前台运行
background：正在后台运行
inactive：过渡状态，不会在正常的React Native应用中出现

属性：

addEventListener：添加监听，
removeEventListener：删除监听

demo：

/**
 * Created by on 2017/5/31.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    AppState,
} from 'react-native';

export default class AppStateDemo extends Component {

    static navigationOptions = {
        title: 'AppState'
    }

    state = {
        currentAppState:AppState.currentState,
    }

    componentDidMount() {
        AppState.addEventListener('change', this._handleAppStateChange);
    }
    componentWillUnmount() {
        AppState.removeEventListener('change', this._handleAppStateChange);
    }
    _handleAppStateChange = (nextAppState) => {
        this.setState({currentAppState: nextAppState});
    }

    render() {
        return (
            <View style={{flex:1}}>
                <Text>当前 state 是: {this.state.currentAppState}</Text>
            </View>
        );
    }
}