解决使用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;