![](/img/trans.png)
[英]React - updating state to add/remove active class from tab navigation
[英]React navigation add the tab title
我在下面为我的项目添加标签导航器。
// BottomTabRouter.js
import Message from "../components/message/Message";
import Address from "../components/address/Address";
import Life from "../components/life/Life";
import Personal from "../components/personal/Personal";
const BottomTabRouter = createBottomTabNavigator(
{
Message: Message,
Address: Address,
Life: Life,
Personal: Personal
}
);
根堆栈下的BottomTabRouter。
const DashboardRouter = createStackNavigator({
Tabs: BottomTabRouter,
Chat: Chat,
UserGroup: UserGroup,
});
如果要添加“消息”屏幕的标题,请在下面添加navigationOptions。
class Life extends React.Component {
static navigationOptions = {
title: "Life"
};
...
}
但这似乎不起作用,如何以及如何为Life组件添加标题?
我认为您需要使用tabBarLabel
属性
class Life extends React.Component {
static navigationOptions = {
tabBarLabel: "Life"
};
...
}
似乎对官方文档有错误的引用,我为我的案子做出了最佳选择。
// Life Router
const LifeRouter = createStackNavigator({
Life: Life,
Friends: Friends,
Find: Find
});
// tabBar hidden configure
LifeRouter.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarVisible
};
};
// create a stack under tabNavigator
// so I can add the title navigationOption to the specific screen
const DashboardRouter = createBottomTabNavigator(
{
Message: MessageRouter,
Adress: AddressRouter,
Life: LifeRouter,
Personal: PersonalRouter
},
...
);
// hide tab header configure
DashboardRouter.navigationOptions = {
header: null
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.