React Navigation - navigation.navigate() 不使用顶部窗口导航

Question

我在我的 React Native 项目中使用以下结构。

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Login" component={LoginScreen} />
    <Stack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        headerRight: () => <SettingsButton />,
        presentation: 'modal',
      }}
    />
    <Stack.Screen
      name="Settings"
      component={SettingsScreen}
      options={{
        presentation: 'card',
      }}
    />
  </Stack.Navigator>
</NavigationContainer>

---

function SettingsButton() {
  const navigation = useNavigation();

  return (
    <Button 
      title="Settings" 
      onPress={() => navigation.navigate('Settings')} 
    />
  );
}

每当按下 SettingsButton 时，我想在主屏幕（前景窗口）而不是登录屏幕（背景/根窗口）上打开我的设置窗口。不幸的是，React Navigation 使用根窗口来推动屏幕并且发生了这种情况（注意后退按钮是如何出现在背景窗口上的）：

我怎样才能让它使用前景窗口？

Answer 1

注意：这里有一个单独的问题，可能会给您带来麻烦。我在下面添加了描述。

关于手头的问题，将堆栈传递给模态如何？

export const Root = () => {
    const RootStack = useMemo(() => createStackNavigator(), []);
    const HomeStack = useMemo(() => createStackNavigator(), []);

    function renderHomeStack() {
        return (
            <HomeStack.Navigator>
                <HomeStack.Screen name="Home" component={HomeScreen} />
                <HomeStack.Screen name="Settings" component={SettingsScreen} />
            </HomeStack.Navigator>
        );
    }

    function renderRootStack() {
        return (
            <RootStack.Navigator>
                <RootStack.Screen name="Login" component={LoginScreen} />
                <RootStack.Screen
                    name="HomeStack"
                    options={{
                        presentation: 'modal',
                    }}
                    component={renderHomeStack}
                />
            </RootStack.Navigator>
        );
    }

    return renderRootStack();
};

你可能会注意到 react-navigation 鼓励分离登录堆栈和主堆栈。你可以阅读更多关于它的信息here。如果不这样做，您可能会遇到多个问题，例如：

1. 在 android 中阻止返回按钮以避免登录成功后返回登录页面。
2. 使用navigate 重置导航状态以更轻松地导航到内页：

   navigation.navigate('Root', { screen: 'Profile' });
   

3. 实施深度链接以根据推送通知进行导航。

最重要的是，实现navigation 是相当可观的 当堆栈分开时更容易。

Answer 2

您的主屏幕是modal，设置屏幕是card，您试图在模态屏幕内打开卡片屏幕，这是不可能的，您必须将设置设置为modal，所以它将弹出在主页顶部或将主页设置为card，因此它不会弹出在设置屏幕顶部。