久久国语露脸精彩电影,中文字幕国产视频

React Native之didFocus和didBlur

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是指當前頁面第一次加載的時候會調(diào)用一次

didBlur是指當前頁面離開的時候會調(diào)用一次(前提是當前頁面沒有被銷毀既沒有執(zhí)行componentWillUnmount()函數(shù))

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"/>

                   <Button
               title="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>
           <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 RootStack = createStackNavigator(
        {
            Home: HomeScreen,
            Details: DetailsScreen,
        },
        {
            initialRouteName: 'Home',
        }
    );


    export default class App extends React.Component {

        constructor(props) {
       super(props);
        }
        render() {
            return <RootStack/>;
        }


    }

3 運行結(jié)果

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后面執(zhí)行

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

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

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

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

發(fā)現(xiàn)沒有,既然執(zhí)行了componentWillUnmount函數(shù),說明頁面已經(jīng)銷毀,既然銷毀了,就沒有執(zhí)行DetailsScreen didBlur start,因為前面的頁面沒有死,所以不會重新加載再次調(diào)用首頁的constructor和componentDidMount方法.從前面日志打印

可以看出,另外一個頁面執(zhí)行新頁面的constructor函數(shù)和componentDidMount函數(shù)才執(zhí)行之前頁面的didBlur start,所以估計這里是來不及執(zhí)行頁面就銷毀了,所以沒有打印DetailsScreen didBlur start.

4 )然后再次點擊返回物理鍵日志如下

I/ReactNativeJS(23183): HomeScreen componentWillUnmount start

只調(diào)用了componentWillUnmount函數(shù),所以頁面銷毀了,HomeScreen didBlur start來不及打印.

4 總結(jié)

didFocus只會在當前頁面的constructor函數(shù)和componentDidMount函數(shù)后面執(zhí)行

didBlur只會在當前頁面沒有調(diào)用componentWillUnmount函數(shù),然后離開當前頁面才執(zhí)行,也意味著,這個頁面沒有死但是去了另外一個頁面才會調(diào)用,如果自己頁面死了,就不會調(diào)用到這里.

作者：chen.yu
深信服三年半工作經(jīng)驗，目前就職游戲廠商，希望能和大家交流和學習,
微信公眾號：編程入門到禿頭或掃描下面二維碼
零基礎入門進階人工智能(鏈接)

在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

前端高級