本文共 4825 字，大约阅读时间需要 16 分钟。

1  didFocus和didBlur解释

didFocus - the screen focused (if there was a transition, the transition completed)didBlur - the screen unfocused (if there was a transition, the transition completed)

didFocus是指当前页面第一次加载的时候会调用一次

didBlur是指当前页面离开的时候会调用一次(前提是当前页面没有被销毁既没有执行componentWillUnmount()函数)

2 测试代码

import React from 'react';import { View, Text, Button} from 'react-native';import { createStackNavigator } from 'react-navigation';class HomeScreen extends React.Component {   constructor(props) {	super(props);	console.log("HomeScreen constructor start");        this.didFocusListener = this.props.navigation.addListener(		'didFocus',		(obj) => {console.log("HomeScreen didFocus start")}		);	this.didBlurListener = this.props.navigation.addListener(		'didBlur',		(obj) => {console.log('HomeScreen didBlur start')}		);    }    static navigationOptions = {        title : 'HomeScreen',    }    componentDidMount = () => {                console.log("HomeScreen componentDidMount start")    }    componentWillUnmount() {		console.log("HomeScreen componentWillUnmount start")		this.didFocusListener.remove();		this.didBlurListener.remove();    }    render() {        return (            
                  
    
     Home Screen
                   
     this.props.navigation.navigate('Details', {                   itemId:100,                   otherParam:'chenyu',               })} title = "go to Details"/>                 
     this.props.navigation.goBack()}              />            );    }}class DetailsScreen extends React.Component {   constructor(props) {	super(props);	console.log("DetailsScreen constructor start");        this.didFocusListener = this.props.navigation.addListener(		'didFocus',		(obj) => {console.log("DetailsScreen didFocus start")}	);	this.didBlurListener = this.props.navigation.addListener(		'didBlur',		(obj) => {console.log('DetailsScreen didBlur start')}	);    }    static navigationOptions = ({navigation}) => {        return {            title : navigation.getParam('otherParam', 'no-values'),        };    };    componentDidMount = () => {        console.log("DetailsScreen componentDidMount start")    }    componentWillUnmount() {	console.log("DetailsScreen componentWillUnmount start")        this.didFocusListener.remove();	this.didBlurListener.remove();    }    render() {        const {navigation} = this.props;        const itemId = navigation.getParam('itemId', 'no-values');        const otherParam = navigation.getParam('otherParam', 'no-values');        return (            
     	    	
      
       Details Screen
      		
      
       itemId:{JSON.stringify(itemId)}
      		
      
       otherParam:{JSON.stringify(otherParam)}
      		
     
     this.props.navigation.push('Details', {		    	itemId: Math.floor(Math.random() * 100),		})}		/>		
     this.props.navigation.navigate('Home')}		/> 		
     this.props.navigation.goBack()}		/>		
     this.props.navigation.popToTop()}		/>                  );    }}const RootStack = createStackNavigator(    {        Home: HomeScreen,        Details: DetailsScreen,    },    {        initialRouteName: 'Home',    });export default class App extends React.Component {    constructor(props) {	super(props);    }    render() {        return 
     ;    }}
   

3 运行结果

2个页面分别如下

在控制台过来React Native命令

adb logcat | grep ReactNativeJS

1) 程序起来打印日志如下

I/ReactNativeJS(21233): HomeScreen constructor startI/ReactNativeJS(21233): HomeScreen componentDidMount startI/ReactNativeJS(21233): HomeScreen didFocus start

这里的didFocus start是在componentDidMount后面执行

2 ) 然后点击go to DETAILS按钮日志如下

I/ReactNativeJS(21233): DetailsScreen constructor startI/ReactNativeJS(21233): DetailsScreen componentDidMount startI/ReactNativeJS(21233): HomeScreen didBlur startI/ReactNativeJS(21233): DetailsScreen didFocus start

然后执行了HomeScreen didBlur start,但是并没有执行HomeScreen componentWillUnmount start,因为页面还没有销毁,所以执行了HomeScreen didBlur start.

3 )然后在在第二个页面点击"GO BACK"或者按下返回键,日志打印如下

I/ReactNativeJS(21233): DetailsScreen componentWillUnmount startI/ReactNativeJS(21233): HomeScreen didFocus start

发现没有,既然执行了componentWillUnmount函数,说明页面已经销毁,既然销毁了,就没有执行DetailsScreen didBlur start,因为前面的页面没有死,所以不会重新加载再次调用首页的constructor和componentDidMount方法.从前面日志打印

I/ReactNativeJS(21233): DetailsScreen constructor startI/ReactNativeJS(21233): DetailsScreen componentDidMount startI/ReactNativeJS(21233): HomeScreen didBlur startI/ReactNativeJS(21233): DetailsScreen didFocus start

可以看出,另外一个页面执行新页面的constructor函数和componentDidMount函数才执行之前页面的didBlur start,所以估计这里是来不及执行页面就销毁了,所以没有打印DetailsScreen didBlur start.

4 )然后再次点击返回物理键日志如下

I/ReactNativeJS(23183): HomeScreen componentWillUnmount start

只调用了componentWillUnmount函数,所以页面销毁了,HomeScreen didBlur start来不及打印.

4 总结

didFocus只会在当前页面的constructor函数和componentDidMount函数后面执行

didBlur只会在当前页面没有调用componentWillUnmount函数,然后离开当前页面才执行,也意味着,这个页面没有死但是去了另外一个页面才会调用,如果自己页面死了,就不会调用到这里.

转载地址：https://chenyu.blog.csdn.net/article/details/83218639 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！