反应导航-未使用顶层窗口导航。导航() [英] React Navigation - navigation.navigate() not navigating using top window

问题描述

我在Reaction 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时，我都希望在主屏幕(前台窗口)而不是登录屏幕(背景/根窗口)上打开我的设置窗口。不幸的是，Reaction导航使用根窗口来推动屏幕，这种情况会发生(请注意后退按钮是如何出现在背景窗口上的)：

如何才能使它使用前台窗口？

推荐答案

注意：这里有一个单独的问题，它可能会在以后给您带来麻烦。我已在下面添加了说明。

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

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相当于 当堆叠分开时更容易。

这篇关于反应导航-未使用顶层窗口导航。导航()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！