我正在使用本机创建一个社交媒体应用程序,我正在尝试将stackNavigator和TabNavigator都放在同一个应用程序中。我有两个stackNavigator屏幕,都有默认屏幕和另一个可以弹出的屏幕。之后,我尝试将这两个stackNavigator屏幕放入tabNavigator屏幕,我得到了很多奇怪的错误,比如转到stackNavigator屏幕只是带我到一个新选项卡,而defualt选项卡(feed和notifs)不是&# 39; t在第一个屏幕上,仅弹出第二个屏幕。
const Feed = StackNavigator({
Feed: {
screen: FeedView,
},
CommentScreen: {
screen: Comments,
},
});
const Notifs = StackNavigator({
NotificationView: {
screen: Notifications,
},
CommentScreen: {
screen: Comments,
},
})
const MyApp = TabNavigator({
Feed: {
screen: FeedView,
},
Notifs: {
screen: Notifs,
},
},
{
tabBarPosition: 'bottom',
animationEnabled: false,
lazy: true,
tabBarOptions: {
activeTintColor: '#fe8200',
inactiveTintColor: '#A9A9A9',
activeBackgroundColor: '#DCDCDC',
inactiveBackgroundColor: '#ffffff',
showIcon: 'true',
showLabel: 'false',
},
tabBarOptions: {
showIcon: 'true',
style: {
backgroundColor: 'white',
},
tabStyle: {
height: 53,
},
labelStyle: {
fontSize: 14,
color: 'grey',
},
iconStyle: {
showIcon: 'true',
},
indicatorStyle: {
backgroundColor: '#fe8200',
},
}
});
export default MyApp;
用户应该有两个选项卡,并且在每个选项卡上,可以使用没有选项卡的堆栈导航器将它们带到新屏幕。我希望得到一些帮助解决这个问题!
答案 0 :(得分:2)
关键是要为您的屏幕设置tabBarVisible
至false
,无需使用标签。
尝试:
const Feed = StackNavigator({
Feed: {
screen: FeedView,
},
CommentScreen: {
screen: Comments,
navigationOptions: {
tabBarVisible: false,
}
},
});
const Notifs = StackNavigator({
NotificationView: {
screen: Notifications,
},
CommentScreen: {
screen: Comments,
navigationOptions: {
tabBarVisible: false,
}
},
})
存在命名问题。在<MyApp />
中,Feed
可能不是FeedView
。
const MyApp = TabNavigator({
Feed: {
screen: Feed,
},
Notifs: {
screen: Notifs,
},
},