问题
我正在用 React Native 创建一个社交媒体应用程序,并且我试图将 stackNavigator 和 TabNavigator 都放在同一个应用程序中。我有两个 stackNavigator 屏幕,两个屏幕都有默认屏幕和另一个可以弹出的屏幕。之后,我尝试将这两个 stackNavigator 屏幕放入 tabNavigator 屏幕中,但我遇到了很多奇怪的错误,例如进入 stackNavigator 屏幕只会将我带到一个新选项卡,而默认选项卡(提要和通知)则不可用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;
应该发生什么
用户应该有两个选项卡,并且在每个选项卡上,可以使用不带选项卡的堆栈导航器将他们带到新屏幕。我希望得到一些帮助来解决这个问题!
最佳答案
关键是设置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,
},
},
关于javascript - 立即使用 stackNavigator 和 tabNavigator 无法正常工作 React Native,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47616848/