使用单个选项卡上的多个屏幕

Posted 2021-04-04

您好，我在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时切换到选项卡屏幕。我该怎么办。

答案

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

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

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

另一答案

类似于您必须创建一个stackNavigator并在bbottomTabNavigator中使用它。见下面的代码：

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

    initialRouteName:"HomeCard",

  }
);

并且现在在您的bottomtab导航器中，仅包括AppStack和其他屏幕，

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

});

这里Home有appstack，而app stack内部有多个屏幕。我为此使用了react-navigation。检查链接react navigation。 。

以及我也使用createStackNavigator和createBottomTabNavigator，检查那里的文档。

希望有帮助。毫无疑问/