渲染Stack和Tab Navigator

Question

我很反应原生，请耐心等待。我有一个Stack and Tab导航器，它们都可以很好地工作但是独立。但是，我需要他们一起工作。

const MainTabs = TabNavigator({
  Messages: { screen: MessageScreen },
  Cards: { screen: CardScreen },
  Statements: { screen: StatementScreen },
  Profile: { screen: ProfileScreen },
},
{
    tabBarOptions: {
    activeTintColor: bongzBlue,
    inactiveTintColor: 'gray',
  },
  tabBarComponent: TabBarBottom,
  tabBarPosition: 'bottom',
  animationEnabled: false,
  swipeEnabled: false,
}
);


 export default class App extends Component {
  render() {
    return (
      // <RootStack />
      <MainTabs />
    );

  }
}

Answer 1

这是一个建议：

您可以将StackNavigator嵌套在TabNavigator中。因此，对于您的具体情况，您可以制作屏幕StackNavigators。

例如，您的消息屏幕可以像这样创建：

const MessagesStack = StackNavigator({ index: { screen: MessageScreen } ... })

然后您可以在TabNavigator中使用它并将其导出为主要组件。

const MainTabs = TabNavigator({ Messages: { screen: MessageStack }, ... },

希望这有帮助。