React Navigation - navigation.navigate() 不使用 top window 导航

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

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

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

Answer 1

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

Answer 2

Note: There is a separate issue here which may cause you trouble down the road. I've added a description below.

关于手头的问题，将堆栈传递给模态怎么样？

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。如果不这样做，您以后可能会遇到多个问题，例如：

在 android 中屏蔽后退按钮以避免在成功登录后返回登录页面。
重置导航状态以使用 navigate 更轻松地导航到内页：
```
navigation.navigate('Root', { screen: 'Profile' });
```
在道路上实施深度链接以根据推送通知进行导航。

最重要的是，实施 navigation 是相当大的当堆叠分开时更容易。

React Navigation - navigation.navigate() 不使用 top window 导航

React Navigation - navigation.navigate() not navigating using top window

react-native

react-navigation

react-navigation-stack