react-navigation之createBottomTabNavigator的生命周期

此篇教程会持续更新。。。


    此教程是React Navigation2.x的,

    测试:苹果虚拟机IOS11.1;安卓8.0的华为Mate9。

    编写环境:在macbook Pro笔记本中;

                      使用的xcode版本是9.1;

                      使用的Android Studio3.2;

                      使用React Native项目版本是0.50.0;

                      使用的是VScode编写的代码;

准备工作:

        编写一个标签导航页面,这个页面包含四个页面,代码如下:

const Home = createBottomTabNavigator({

    Property:Property,

    Market:Market,

    Discover:Discover,

    Me:Me,

},{

    initialRouteName:'Property'

})

注意:使用之前需要先安装react-navigation;并且在需要的地方导入。

初始导航页面

第一次进去的时候执行了initialRouteName设置的页面,也就是这个页面的装载的函数都会执行,分别constructor,componentWillMount,render,componentDidMount,此时我并没有进行任何操作,当我点击行情时会调用行情这个页面的四个函数,然后再点击Me,此时又执行了这个页面的四个函数;当我退出程序的时候,会执行行情、Discover和Me这三个页面的componentWillUnmount函数,设置默认路由的资产页面并不会被销毁。

执行循序:

    首次进入:执行initialRouteName里面设置的页面>constructor>componentWillMount>render>componentDidMount;

    当点击行情或者其余两个页面>constructor>componentWillMount>render>componentDidMount;

    当退出程序时能看到的被销毁页面:行情、Discover和Me。

如果有好的建议望提出。

2019/08/08补充(环境是:react-native 0.59.8,react-navigation 3.x)react-navigation createBottomTabNavigator渲染补充

你可能感兴趣的:(react-navigation之createBottomTabNavigator的生命周期)