reactjs React导航嵌套选项卡,导航器-显示不在选项卡中的初始路由

thigvfpy  于 2023-02-03  发布在  React
关注(0)|答案(2)|浏览(128)

在我的应用程序中使用React-Navigation,我希望initialRoute是"Home"组件,并显示BottomTabNavigator。但我不希望Home是选项卡之一。添加initialRouteName ="Home"会将Home显示为初始路线,但不会显示选项卡。如果没有initialRoute,我会获得选项卡,但不会将Home屏幕显示为初始屏幕。
我有一个嵌套的React Navigation,设置如下:

const MyTabs = () =>{
  return (
    <Tab.Navigator>
      <Tab.Screen name="About" component={AboutStack} />
      <Tab.Screen name="Setting" component={SettingStack} />
    </Tab.Navigator>
  );
}

const MyStack = () => {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Tabs" component={MyTabs} />
      <Stack.Screen name="Home" component={HomeStack} />    
    </Stack.Navigator>
  );
}

这看起来应该相对容易实现,但是我已经广泛地搜索了另一个类似的问题,并且尝试了许多不同的嵌套设置都没有结果。
正在运行:"@react-navigation/堆栈":"^6.0.7"或"最新版本"
下面是完整的测试代码:https://snack.expo.dev/@dezpo/nestednavigator_homepage_notintab
任何帮助都非常感谢。

rkkpypqq

rkkpypqq1#

您可以使用initialRouteName属性在MyStack导航器中将初始路线设置到主屏幕:

const MyStack = () => {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Tabs" component={MyTabs} />
      <Stack.Screen name="Home" component={HomeStack} />    
    </Stack.Navigator>
  );
}

然后,在HomeStack组件中,您可以导航到Home组件中的Tabs屏幕:

const HomeStack = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Tabs"
        onPress={() => navigation.navigate("Tabs")}
      />
    </View>
  );
};

这样,Home组件将是初始路径,当用户单击“Go to Tabs”(转到选项卡)按钮时,将显示Tabs屏幕和Tab.Navigator

xxhby3vn

xxhby3vn2#

事实上,我已经把这些整理好了......再简单不过了

tabBarItemStyle: { display: "none" }

🤦‍雄性️
我最后的导航器看起来像这样,其中一个BottomTab是“Home

const MyTabs = () =>{
  return (
    <Tab.Navigator >
      <Tab.Screen name="Home" component={HomeStack} 
        options={{
          tabBarItemStyle: { display: "none" },
        }}/>
      <Tab.Screen name="About" component={AboutStack} />
      <Tab.Screen name="Setting" component={SettingStack} />
    </Tab.Navigator>
  );
}

const MyStack = () => {
  return (
    <Stack.Navigator initialRouteName="Home" 
      screenOptions={{
        headerShown: false
      }}>
      <Stack.Screen name="Tabs" component={MyTabs} />
    </Stack.Navigator>
  );
}

更新了Snack
看起来可能有更好的解决方案,但这是目前的伎俩。

相关问题