无法使用 React Native Navigation 导航到屏幕答案

【问题标题】：Unable to navigate to screen with React Native Navigation无法使用 React Native Navigation 导航到屏幕
【发布时间】：2022-11-19 08:47:52
【问题描述】：

我在 React Native Expo 上遇到 React Navigation 问题。

我有一个底部选项卡导航器、一个单独的屏幕 (ProfileScreen) 和一个模式 (ProfileLoginModal)。模式有一个按钮应该重定向 ProfileScreen。我将 navigation.navigate("ProfileScreen") 放在模式中，但它什么也没做，它甚至没有给我一个错误。

但是，如果我将其更改为底部选项卡导航中的屏幕之一，例如 navigation.navigate("Root", {screen: "HomeScreen})，它就可以正常工作。它只是不适用于底部标签导航之外的屏幕。

谁能帮我理解我做错了什么？

导航结构：

- BottomTabNavigator (Root)
   - HomeScreen
   - MenuScreen
- ProfileScreen
- ProfileLoginModal

这是我的导航：

const Stack = createNativeStackNavigator<RootStackParamList>();

<NavigationContainer linking={LinkingConfiguration}>
  <Stack.Navigator>
    <Stack.Screen
      name="Root"
      component={BottomTabNavigator}
    />
    <Stack.Screen
      name="ProfileScreen"        // ProfileScreen (destination)
      component={ProfileScreen}
    />
    <Stack.Group screenOptions={{ presentation: 'modal' }}>
      <Stack.Screen
        name="ProfileLoginModal"    // Go to ProfileScreen from this modal
        component={ProfileLoginModal}
       />
    </Stack.Group>
  </Stack.Navigator>
</NavigationContainer>


const BottomTab = createBottomTabNavigator<RootTabParamList>();

function BottomTabNavigator() {
  return (
    <BottomTab.Navigator
      initialRouteName="HomeScreen"
      screenOptions={...}
    >
      <BottomTab.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={...}
      />
      <BottomTab.Screen
        name="Menu"
        component={MenuScreen}
        options={...}
      />
    </BottomTab.Navigator>
  );
}

打字：

export type RootStackParamList = {
  Root: NavigatorScreenParams<RootTabParamList> | undefined;
  ProfileScreen: undefined;
  ProfileLoginModal: undefined;
};

export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, Screen>;

export type RootTabParamList = {
  HomeScreen: undefined;
  MenuScreen: undefined;
};

export type RootTabScreenProps<Screen extends keyof RootTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<RootTabParamList, Screen>,
    NativeStackScreenProps<RootStackParamList>
  >;

额外的细节：我希望 ProfileScreen 的底部选项卡导航器可见，但没有相应的选项卡图标。

我试图制作一个包含 HomeScreen 和 ProfileScreen 的嵌套导航器，就像这样

- BottomTabNavigator (Root)
   - NestedHome
      - HomeScreen
      - ProfileScreen
   - MenuScreen
- ProfileLoginModal

但是我遇到了很多问题，因为我不知道如何访问双嵌套屏幕，如果可能的话（navigation.navigate('Root', screen: {'NestedHome', screen: {'ProfileScreen'}}) 显然是不正确的）。我找不到太多关于它的信息。

谢谢你的帮助。

【问题讨论】：

标签： typescript react-native expo react-navigation

【解决方案1】：

万一有人徘徊在这个问题上，我最终选择了我之前尝试过的嵌套导航。正确的功能是navigation.navigate("Root", {screen: "NestedHome", params: {screen: "ProfileScreen"}})。据我所见，文档没有对此进行详细介绍，我只是通过不同的 SO 线程发现的。

但是，我仍然想知道如何在不嵌套屏幕的情况下导航到屏幕（我知道在这种情况下底部选项卡导航将不可见），如 React Navigation docs 中所述。如果有人知道怎么做以及为什么我的初始代码不起作用，请在这里分享！

【讨论】：