同时使用 stackNavigator 和 tabNavigator 无法正常工作 React Native

Question

问题

我正在在React Native中创建一个社交媒体应用程序，并且我正在尝试在同一应用中使用Stacknavigator和TabNavigator。我有两个stacknavigator屏幕，均配有默认屏幕和另一个可以弹出的屏幕。之后，我尝试将这两个stacknavigator屏幕放入Tabnavigator屏幕中，并且我得到了很多奇怪的错误，例如进入StackNavigator屏幕，只需将我带到新的标签，而Defualt Tabs（Feed和Notifs）Aren''''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;

应该发生什么

用户应该有两个选项卡，在每个选项卡上，可以使用堆栈导航器将其带到新屏幕上，而无需标签。我很想帮助解决这个问题！

Answer 1

关键是将 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,
  },
},