页面刷新后 React Native 中的导航不起作用

Question

我使用 react-native-web 设置了 react-native 应用程序。 在这个应用程序中我需要有导航，所以我根据入门指南添加了 react-navigation/native package 。 在移动平台上一切正常，但在浏览器导航中无法按预期工作。 当我刚启动该应用程序时，我可以毫无问题地从一个页面导航到另一个页面。 但是当我刷新任何页面时，导航会返回到 Stack.Navigator 列表中的第一个 Stack.Screen 组件。 然后，当我单击指向另一个页面的链接时，没有任何反应，控制台中没有出现错误，路由也没有改变。

因此，只有当我刚刚启动应用程序并且不更改路线并且不刷新页面时，导航才能正常工作。

这是我的链接。 我遵循了深度链接指南

const linking: LinkingOptions<{
  Auth: string;
  Home: string;
  Table: string;
  Loading: string;
}> = {
  prefixes: ['alfateacherapp://', 'http://'],
  config: {
    initialRouteName: 'Loading',
    screens: {
      Auth: 'auth',
      Home: 'home',
      Table: 'table',
      Loading: 'loading',
    },
  },
};

这是我的 NavigationContainer：

<NavigationContainer linking={linking} fallback={<Loading />}>
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    {isLoadedToken ? (
      token ? (
        // Screens for logged in users
        <Stack.Group>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Table" component={Table} />
        </Stack.Group>
      ) : (
        // Auth screens
        <Stack.Group>
          <Stack.Screen name="Auth" component={Auth} />
        </Stack.Group>
      )
    ) : (
      <Stack.Screen name="Loading" component={Loading} />
    )}
  </Stack.Navigator>
</NavigationContainer>

在主页和表格屏幕中，我只有来自 react-navigation/native 的链接和来自 react-native 的文本。主页：

<Text>Home</Text>
<Link to={{ screen: 'Table' }}>Link to Table</Link>

桌子：

<Text>Table</Text>
<Link to={{ screen: 'Home' }}>Link to Home</Link>

我该如何解决这个问题？ 当我在浏览器中时，我需要能够刷新页面并保持在当前路线上。

Answer 1

刷新后 URL 很可能会重置，因为您正在渲染Loading屏幕 - React Navigation 会调整 URL 以匹配当前渲染的屏幕。

您应该避免在确定用户是否登录之前渲染NavigationContainer ，即Loading组件不应该是堆栈中的屏幕，而是您直接渲染的组件。

if (!isLoadedToken) {
  return <Loading />;
}

return (
  <NavigationContainer linking={linking} fallback={<Loading />}>

授权流程指南显示了类似的方法： https://reactnavigation.org/docs/auth-flow/

Answer 2

我想到了。 有一些特定于平台的代码用于呈现 web 索引文件。 当平台为“web”时，rootTag 显示通常的 React App 组件，而在所有其他情况下，来自 react-native 的 AppRegistry 注册了该应用程序：这样做是为了绕过警告。 ReactDOM.render 在 React 18 中不再受支持。请改用 createRoot。

AppRegistry.registerComponent('Teacher', () => App);

if (Platform.OS === 'web') {
  const rootTag = createRoot(document.getElementById('root'));
  rootTag.render(<App />);
} else {
  AppRegistry.runApplication('Teacher', {
    initialProps: {},
    rootTag: document.getElementById('root'),
  });
}

当我删除此条件并仅保留 react-native 处理应用程序的方式时，一切都开始正常工作。

AppRegistry.registerComponent('Teacher', () => App);

AppRegistry.runApplication('Teacher', {
  initialProps: {},
  rootTag: document.getElementById('root'),
});