我么知道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 <View>
<Text>这是主页</Text>
</View>
}
}
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 <View>
<Text>这是我的页面</Text>
</View>
}
}
export default Mine;
然后运行，打印的结果如下：
> 这是<主页>的navigationOptions
> 这是<我的>的navigationOptions
> 这是<主页>constructor
> 这是<主页>componentWillMount
> 这是<主页>componentDidMount
此时我点击我的，运行结果如下：
这是<我的>constructor
这是<我的>componentWillMount
这是<我的>componentDidMount
此时我再次点击主页不会输出任何内容，如果你需要在点击的时候再次刷新页面，那么需要参考我的另一篇文章Navigation prop reference之addListener。
需要特别说明的是：无论你怎么设置navigationOptions，渲染的流程不会发生改变，也都是先渲染各个组件的navigationOptions，然后再渲染具体的页面。
网友评论