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 (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>Home Screen</Text><Button onPress={() => this.props.navigation.navigate('Details', {itemId:100,otherParam:'chenyu',})} title = "go to Details"/><Buttontitle="Go back"onPress={() => this.props.navigation.goBack()}/></View>);} }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 (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Details Screen</Text><Text>itemId:{JSON.stringify(itemId)}</Text><Text>otherParam:{JSON.stringify(otherParam)}</Text><Buttontitle="Go to Details... again"onPress={() => this.props.navigation.push('Details', {itemId: Math.floor(Math.random() * 100),})}/><Buttontitle="Go to Home"onPress={() => this.props.navigation.navigate('Home')}/> <Buttontitle="Go back"onPress={() => this.props.navigation.goBack()}/><Buttontitle="Go popToTop"onPress={() => this.props.navigation.popToTop()}/></View>);} }const RootStack = createStackNavigator({Home: HomeScreen,Details: DetailsScreen,},{initialRouteName: 'Home',} );export default class App extends React.Component {constructor(props) {super(props);}render() {return <RootStack/>;}}

?

?

?

?

3 運行結果

2個頁面分別如下

?

?

?

在控制臺過來React Native命令

adb logcat | grep ReactNativeJS

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

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

這里的didFocus start是在componentDidMount后面執行

?

2 ) 然后點擊go to DETAILS按鈕日志如下

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

然后執行了HomeScreen didBlur start,但是并沒有執行HomeScreen componentWillUnmount start,因為頁面還沒有銷毀,所以執行了HomeScreen didBlur start.

?

3 )然后在在第二個頁面點擊"GO BACK"或者按下返回鍵,日志打印如下

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

發現沒有,既然執行了componentWillUnmount函數,說明頁面已經銷毀,既然銷毀了,就沒有執行DetailsScreen didBlur start,因為前面的頁面沒有死,所以不會重新加載再次調用首頁的constructor和componentDidMount方法.從前面日志打印

I/ReactNativeJS(21233): DetailsScreen constructor start I/ReactNativeJS(21233): DetailsScreen componentDidMount start I/ReactNativeJS(21233): HomeScreen didBlur start I/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函數,然后離開當前頁面才執行,也意味著,這個頁面沒有死但是去了另外一個頁面才會調用,如果自己頁面死了,就不會調用到這里.

?

?

總結

以上是生活随笔為你收集整理的React Native之didFocus和didBlur的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。