问题:在登录页面点击登录跳转至类似微信的有三个导航栏的,这时在TabNavigator中分别设置三个页面的headerTitle在页面上不起作用。 (PS:小白官方文档真的看不懂啊,好乱的官方文档...)
错误代码:
const tabNavigator = createBottomTabNavigator(
{
Chat:{
screen:Chat,
navigationOptions:{
headerTitle:'消息',
tabBarLabel:'消息',
tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/chat.png')}/>
}
},
People:{
screen:People,
navigationOptions:{
headerTitle:'联系人',
tabBarLabel:'联系人',
tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/people.jpg')}/>
}
},
Me:{
screen:Me,
navigationOptions:{
header:null,
tabBarLabel:'我',
tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/me.jpg')}/>
}
}
},
);
错误页面如下:上面配置的标题没有起作用。。。
解决方法:为TabNavigator中配置的三个页面创建三个StackNavigator,可以在StackNavigator中设置每个页面的HeaderTitle的内容,然后可以在TabNavigator中配置这三个StackNavigator
代码:
const chatStackNavigator = createStackNavigator({
Chat:{
screen:Chat,
navigationOptions:{
headerTitle:'消息',
}
},
ChatDetail:{
screen:ChatDetail,
}
});
const meStackNavigator = createStackNavigator({
Me:{
screen:Me,
navigationOptions:{
header:null
}
},
MeDetail:{
screen:MeDetail
}
});
const peopleStackNavigator = createStackNavigator({
People:{
screen:People,
navigationOptions:{
headerTitle:'联系人'
}
},
PeopleDetail:{
screen:PeopleDetail
}
});
const tabNavigator = createBottomTabNavigator(
{
Chat:{
screen:chatStackNavigator, // 在screen中配置这三个Stack即可
navigationOptions:{
tabBarLabel:'消息',
tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/chat.png')}/>
}
},
People:{
screen:peopleStackNavigator,
navigationOptions:{
tabBarLabel:'联系人',
tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/people.jpg')}/>
}
},
Me:{
screen:meStackNavigator,
navigationOptions:{
tabBarLabel:'我',
tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/me.jpg')}/>
}
}
},
{
tabBarPosition:'bottom',
swipeEnabled:'true',
animationEnabled:'false',
tabBarOptions:{
activeTintColor:'#4BD1D2',
inactiveTintColor:'#000',
showLabel:'true',
showIcon:'true',
upperCaseLabel:'true',
pressColor:'#788493',
pressOpacity:'0.8',
style: {
backgroundColor: '#fff',
paddingBottom: 1,
borderTopWidth: 0.2,
paddingTop:1,
borderTopColor: '#ccc',
},
labelStyle: {
fontSize: 11,
margin: 1
},
}
}
);
const Main = createAppContainer(tabNavigator);
export default Main;
标签栏已经加上去了,这样做主要是因为在后面的开发中,三个页面还会跳转到其他的页面,所以分开写三个StackNavigator方便以后添加配置。小白填坑!!!
效果实现: