根据选项卡设置堆栈导航器 initialRouteName

Question

我有一个如下标签导航器

export const MainNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" options={{ title: "Home" }} component={MainStackScreen} />
      <Tab.Screen name="Favorite" options={{ title: "Favorite" }} component={MainStackScreen} />
    </Tab.Navigator>
  );
};

（简化的）MainStackScreen 如下所示：

export const MainStackScreen = () => {
  return (
    <Stack.Navigator screenOptions={{ headerBackTitleVisible: false }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Favorite" component={FavoriteHomeScreen} />
      <Stack.Screen name="Organisation" component={OrganisationScreen}/>
      <Stack.Screen name="Leagues" component={LeaguesScreen}/>
      <Stack.Screen name="Groupes" component={GroupesScreen}/>
    </Stack.Navigator>
  );
};

基本上，我希望有一个不同的 initialRouteName，具体取决于选择的选项卡。

为了提供更多上下文，最喜欢的选项卡允许用户跳过您在主页选项卡上的一些导航步骤，但让用户导航到相同的屏幕。这就是这两个选项卡共享同一个堆栈的原因。

Answer 1

你可以这样做：

const MainStackScreen = ({route}) => {
  return (
    <Stack.Navigator
      initialRouteName={route.name === 'Favorite' ? 'Leagues' : 'Home'}
      screenOptions={{headerBackTitleVisible: false}}>
      <Stack.Screen name="Favorite" component={FavoriteHomeScreen} />
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Organisation" component={OrganisationScreen} />
      <Stack.Screen name="Leagues" component={LeaguesScreen} />
      <Stack.Screen name="Groupes" component={GroupesScreen} />
    </Stack.Navigator>
  );
};

根据当前路由名称（Home 或 Favorite 在您的情况下），您可以动态设置 initialRouteName。

在上面的示例中，如果您在Favorite 标签上，initialRouteName 将为Leagues，否则为Home。

---

如果您只想跳到 Home 堆栈（如果您在 Home 选项卡上，并且如果您在 Favorite 选项卡上跳到 Favorite 堆栈，则不要'不需要三元语句，你可以这样做：

// ...
initialRouteName={route.name}
// ...