首页 文章

一次使用stackNavigator和tabNavigator无法正常工作React Native

提问于
浏览 次
0

问题

我正在使用本机创建一个社交媒体应用程序，我正在尝试将stackNavigator和TabNavigator都放在同一个应用程序中 . 我有两个stackNavigator屏幕，都有默认屏幕和另一个可以弹出的屏幕 . 之后，我尝试将这两个stackNavigator屏幕放入tabNavigator屏幕，我得到了很多奇怪的错误，比如进入stackNavigator屏幕只需要带我到一个新选项卡，并且defualt选项卡（feed和notifs）不是'在第一个屏幕上退出，只弹出第二个屏幕 .

代码

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;

会发生什么

用户应该有两个选项卡，在每个选项卡上，可以使用没有选项卡的堆栈导航器将它们带到新屏幕 . 我希望得到一些帮助解决这个问题！

javascript android react-native react-navigation

1 回答

  • 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,
  },
},
    回复于

相关问题