Typescript 基于选项卡设置堆栈导航器initialRouteName

我在下面的选项卡导航器中有一个

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>
  );
};

基本上，我希望根据所选的选项卡使用不同的

initialRouteName

---

为了提供更多上下文，favorite选项卡允许用户跳过Home选项卡上的一些导航步骤，但允许用户导航相同的屏幕。这就是这两个选项卡共享同一堆栈的原因。

您可以执行以下操作：

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>
  );
};

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>
  );
};

---

您可以这样做：

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>
  );
};

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>
  );
};

---

不需要额外的参数。只能使用route.name获取tab@satya164例如，如果您想从home选项卡转到home堆栈，这是正确的，但这更灵活。例如，如果您在

最喜爱的

上，您可以跳到

联赛

。但是我会把你的观点添加到答案中。我不是指

initialRouteName={route.name}

，而是基于

route.name

在组件内部有条件地设置

initialRouteName

，而不是传递额外的param@satya164谢谢你指出这一点。我已经更新了我的答案。不需要额外的参数。只能使用route.name获取tab@satya164例如，如果您想从home选项卡转到home堆栈，这是正确的，但这更灵活。例如，如果您在

最喜爱的

上，您可以跳到

联赛

。但是我会把你的观点添加到答案中。我不是指

initialRouteName={route.name}

，而是基于

route.name

在组件内部有条件地设置

initialRouteName

，而不是传递额外的param@satya164谢谢你指出这一点。我已经更新了我的答案。