react-native - 在单个选项卡上使用多个屏幕

Question

您好，我在 react native 中使用此代码来创建选项卡。但我想根据用户按下的按钮在单个屏幕上使用多个屏幕。那么我该如何在本机反应中做到这一点

const TabNavigator = createBottomTabNavigator(  
    {  
      Home:{  
        screen:Screen1,  
        navigationOptions:{  
          tabBarLabel:'firsttab',  
          tabBarIcon:({tintColor})=>(  
              <Image source = {require("../../Images/react-logo.png")} style={{width : 25 , height:25}}/> 
          )  
        }  
      },

我正在获取screen1，但我希望单击firsttab 时我想切换选项卡屏幕。我怎样才能做到这一点。

Answer 1

这就像您必须创建一个 stackNavigator 并在 bbottomTabNavigator 中使用它。见下面的代码：

const AppStack = createStackNavigator(
  {
    HomeScreen: {
      screen: Home
    },
    AirportMeeting:{
      screen:AirportMeeting
    },
    MeetingPoint:{
      screen:MeetingPoint
    },
    DriverDetails:{
      screen:DriverDetails
    },
    },
  {

    initialRouteName:"HomeCard",

  }
);

现在在您的底部选项卡导航器中，您只需包含 AppStack 和其他屏幕，

const TabNavigator = createBottomTabNavigator({
  Home: AppStack,
  Notification:Notifications,
  Account: SettingsScreen,

});

这里 Home 有 appstack，app stack 里面有多个屏幕。我正在使用react-navigation它。检查链接反应导航。.

并且我也在使用 createStackNavigator 和 createBottomTabNavigator ，检查那里的文档。

希望能帮助到你。如有疑问/

Answer 2

const Screen1 = createStackNavigator({
  //...path your screen1,
});

const Screen2 = createStackNavigator({
  //...path your screen2,
});

const TabNavigator = createBottomTabNavigator({
  Screen1,
  Screen2
});