react-navigation createBottomTabNavigator渲染补充

我么知道createBottomTabNavigator里面的tab是当我们进来的时候就已经出现了的，也就是下面的图标和文字，下面使用tab代替，也就代表tab在进来的时候就已经渲染过了，由此我们可以得出渲染tab图标和文字是先于页面的结论，我们我们知道createBottomTabNavigator有两个参数，第一个是所有的路由，第二个可以说是整个tab的配置，而每一个路由里面的navigationOptions属性是每一个页面所对应的tab配置：

import Index from '../home/Index';

import Mine from '../home/Mine';

import {

    createAppContainer,

    createBottomTabNavigator } from 'react-navigation';

export default createAppContainer(createBottomTabNavigator({

    Index: Index,

    Mine: Mine

}, {

    initialRouteName: "Index"

}))

// 上面我没有写navigationOptions，我把navigationOptions写到了每一个页面里面

为了验证上面我所说的渲染过程，我敲代码，打印日志来看输出结果。

我写了两个页面，一个是主页，一个是我的页面，默认路由就上面所说的那样，是主页。下面是两个页面的具体代码

// Index.js

import React, { Component } from 'react';

import { View, Text } from 'react-native';

class Index extends Component {

    constructor(props) {

        super(props);

        console.log("这是<主页>constructor");

    }

    componentWillMount () {

        console.log("这是<主页>componentWillMount");

    }

    componentDidMount () {

        console.log("这是<主页>componentDidMount");

    }

    componentWillUnmount () {

        console.log("这是<主页>componentWillUnmount");

    }

    static navigationOptions = () => {

        console.log("这是<主页>的navigationOptions");

        return {

            title: "主页"

        }

    }

    render() {

        return 

            这是主页

        

    }

}

export default Index;

// Home.js

import React, { Component } from 'react';

import { View, Text } from 'react-native';

class Mine extends Component {

    constructor(props) {

        super(props);

        console.log("这是<我的>constructor");

    }

    componentWillMount () {

        console.log("这是<我的>componentWillMount");

    }

    componentDidMount () {

        console.log("这是<我的>componentDidMount");

    }

    componentWillUnmount () {

        console.log("这是<我的>componentWillUnmount");

    }

    static navigationOptions = () => {

        console.log("这是<我的>的navigationOptions");

        return {

            title: "我的"

        }

    }

    render() {

        return 

            这是我的页面

        

    }

}

export default Mine;

然后运行，打印的结果如下：

> 这是<主页>的navigationOptions

> 这是<我的>的navigationOptions

> 这是<主页>constructor

> 这是<主页>componentWillMount

> 这是<主页>componentDidMount

此时我点击我的，运行结果如下：

这是<我的>constructor

这是<我的>componentWillMount

这是<我的>componentDidMount

此时我再次点击主页不会输出任何内容，如果你需要在点击的时候再次刷新页面，那么需要参考我的另一篇文章Navigation prop reference之addListener。

需要特别说明的是：无论你怎么设置navigationOptions，渲染的流程不会发生改变，也都是先渲染各个组件的navigationOptions，然后再渲染具体的页面。