参照先:
React NativeのdidFocusとdidBlue

コード:

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);

テスト1:

ホーム

へ

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

ホーム

を返す

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

テスト2:

ホーム

へ
同上

detail

に入る
同上

詳細

をクリック

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

クリック

に戻る

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

第2の詳細ページクリックしない場合はホーム

をクリックします.

#  2 
componentWillUnmount ----------------------7
# home
HomeScreen   ===3===    didFocus
#  1 
componentWillUnmount ----------------------7

テスト3、携帯電話のホームボタンを押す

ログは印刷されません.