react native 使用react-navigation

解决使用react-navigation （嵌套路由）标题栏设置title空白方案：

Tab.navigationOptions = ({navigation}) => {
    let {routeName} = navigation.state.routes[navigation.state.index];
    // You can do whatever you like here to pick the title based on the route name
    let headerTitle = routeName;
    return {
        headerTitle,
    };
};

加在定义Tab处。

完整的定义：

import React from 'react';
import FirstPage from "./HomePage";
import SecondPage from "./ClassfyPage";
import ThirdPage from "./ChartPage";
import ForthPage from "./SettingPage";
import {Dimensions, Image} from "react-native";
import color from "../style/ColorStyle";
import {createBottomTabNavigator} from "react-navigation";


const Tab = createBottomTabNavigator({
    First: {
        screen: FirstPage,
        navigationOptions: {
            tabBarIcon: ({focused}) => {
                // 根据是否选中，显示不同图片
                const icon = focused
                    ? require('../images/icon_home_active.png')
                    : require('../images/icon_home.png');
                return <Image source={icon} style={{height: 22, width: 22}}/>;
            },
        }

    },
    Second: {
        screen: SecondPage
    },
    Third: {
        screen: ThirdPage
    },
    Forth: {
        screen: ForthPage
    }
}, {
    animationEnabled: true,
    swipeEnabled: false,
    swipeEnabled: true,//是否可以滑动切换
    animationEnabled: true,//切换是否有动画
    initialRouteName: 'First', //进入App的首页面
    backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转
    tabBarOptions: { //对于导航的设置
        indicatorStyle: {height: 0},  //android特有下划线的颜色1
        inactiveTintColor: '#a9a9a9', // 文字和图片默认颜色
        activeTintColor: color.activeBarText,
        labelStyle: {     //文字的样式
            fontSize: 10,
            textAlign: 'center',
        },
        style: {    //对于导航的stytles
            backgroundColor: 'white', // TabBar 背景色
            borderTopColor: '#ebebeb',
            borderTopWidth: 1,
            height: Dimensions.get('window').height * 0.08,
            height: 50
        }
    },
    navigationOptions: ({navigation}) => ({
        // title: navigation.state.routeName,
        headerStyle: {backgroundColor: '#fff',},
        headerTintColor: color.activeBarText,
        headerTitleStyle: {fontWeight: 'bold',},
    }),
    mode: 'card',
});

Tab.navigationOptions = ({navigation}) => {
    let {routeName} = navigation.state.routes[navigation.state.index];
    // You can do whatever you like here to pick the title based on the route name
    let headerTitle = routeName;
    return {
        headerTitle,
    };
};

export default Tab;