react-navigation:onWillFocus/onDidFocus/onWillBlur/onDidBlur/componentWillUnmount等周期

参考：

React Native之didFocus和didBlur

代码：

import React from 'react';
import {View, Text, Button} from 'react-native';
import {createAppContainer, NavigationEvents} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

//didFocus只会在当前页面的constructor函数和componentDidMount函数后面执行
//
//didBlur只会在当前页面没有调用componentWillUnmount函数,然后离开当前页面才执行,
// 也意味着,这个页面没有死但是去了另外一个页面才会调用,如果自己页面死了,就不会调用到这里.
class HomeScreen extends React.Component {

    constructor(props) {
        super(props);
        console.log('HomeScreen   ===0===    constructor');
        this.didFocusListener = this.props.navigation.addListener(
            'didFocus',
            (obj) => {
                console.log('HomeScreen   ===3===    didFocus');
            },
        );
        this.didBlurListener = this.props.navigation.addListener(
            'didBlur',
            (obj) => {
                console.log('HomeScreen   ===4===    didBlur');
            },
        );
    }

    static navigationOptions = {
        title: 'HomeScreen',
    };

    componentWillMount() {
        console.log('HomeScreen   ===1===    componentWillMount');
    }

    componentDidMount = () => {
        console.log('HomeScreen   ===2===    componentDidMount');
    };

    componentWillUnmount() {
        console.log('HomeScreen   ===5===    componentWillUnmount');
        this.didFocusListener.remove();
        this.didBlurListener.remove();
    }

    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>Home Screen</Text>

                <Button onPress={() => this.props.navigation.navigate('Details', {
                    itemId: 100,
                    otherParam: 'detail param',
                })} title="go to Details"/>

                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
            </View>
        );

    }
}

class DetailsScreen extends React.Component {

    constructor(props) {
        super(props);
        console.log('constructor ----------------------0');
    }

    static navigationOptions = ({navigation}) => {
        return {
            title: navigation.getParam('otherParam', 'no-values'),
        };
    };

    componentWillMount() {
        console.log('componentWillMount ----------------------1');
    }

    componentDidMount = () => {
        console.log('componentDidMount ----------------------2');
    };

    _onWillFocus() {
        console.log('onWillFocus ----------------------3');
    }

    _onDidFocus() {
        console.log('onDidFocus ----------------------4');
    }

    _onWillBlur() {
        console.log('onWillBlur ----------------------5');
    }

    _onDidBlur() {
        console.log('onDidBlur ----------------------6');
    }

    componentWillUnmount() {
        console.log('componentWillUnmount ----------------------7');
    }

    render() {
        const {navigation} = this.props;
        const itemId = navigation.getParam('itemId', 'no-values');
        const otherParam = navigation.getParam('otherParam', 'no-values');

        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <NavigationEvents
                    onWillFocus={() => this._onWillFocus()}
                    onDidFocus={() => this._onDidFocus()}
                    onWillBlur={() => this._onWillBlur()}
                    onDidBlur={() => this._onDidBlur()}/>

                <Text>Details Screen</Text>
                <Text>itemId:{JSON.stringify(itemId)}</Text>
                <Text>otherParam:{JSON.stringify(otherParam)}</Text>
                <Button
                    title="Go to Details... again"
                    onPress={() => this.props.navigation.push('Details', {
                        itemId: Math.floor(Math.random() * 100),
                    })}
                />
                <Button
                    title="Go to Home"
                    onPress={() => this.props.navigation.navigate('Home')}
                />
                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
                <Button
                    title="Go popToTop"
                    onPress={() => this.props.navigation.popToTop()}
                />
            </View>
        );
    }

}

const StackNavigatorConfig = {
    initialRouteName: 'Home',
};

const RouteConfigs = {
    Home: HomeScreen,
    Details: DetailsScreen,
};

const StackNavigator = createStackNavigator(RouteConfigs, StackNavigatorConfig);

export const RootStack = createAppContainer(StackNavigator);

测试一：

• 进入到home

HomeScreen   ===0===    constructor
HomeScreen   ===1===    componentWillMount
HomeScreen   ===2===    componentDidMount
HomeScreen   ===3===    didFocus

• 进入detail

constructor ----------------------0
componentWillMount ----------------------1
componentDidMount ----------------------2
onWillFocus ----------------------3
HomeScreen   ===4===    didBlur
onDidFocus ----------------------4

• 返回home

HomeScreen   ===3===    didFocus
componentWillUnmount ----------------------7

测试二：

• 进入到home

同上

• 进入detail

同上

• 再点击详情

constructor ----------------------0
componentWillMount ----------------------1
componentDidMount ----------------------2
onWillFocus ----------------------3
    onWillBlur ----------------------5
    onDidBlur ----------------------6
onDidFocus ----------------------4

• 点击返回

    onWillFocus ----------------------3
    onDidFocus ----------------------4
componentWillUnmount ----------------------7

• 第二个详情页如果不点击返回，点击去home

# 第2个详情页
componentWillUnmount ----------------------7
# home
HomeScreen   ===3===    didFocus
# 第1个详情页
componentWillUnmount ----------------------7

测试三、按手机home键

不打印任何日志。