react-native - 如何一起使用 react-native-web 和 react-navigation 并从 web url 访问

Question

更新 :

react-navigation web 支持已经完成。按照这个:
https://reactnavigation.org/docs/en/web-support.html

来源 :

我尝试在 react-native 和 web 之间共享我的代码。
当我尝试 react-native-web 时，它运行良好。
但只有一个问题，如何从 URL 访问特定屏幕？
我阅读了 react-navigation 文档，没有任何相关内容。
并且 react-router-native 可以捕获 web URL，
但它有像 StackNavigator/DrawerNavigator 这样的导航器。
和想法？

Answer 1

我不确定您发布此问题时的情况，但是现在您绝对可以在 web 上使用 react-navigation。
现在有了 Linking，我们可以处理 Android 和 iOS 上 React Native 应用程序中的深层链接，以及
在 Web 上使用时，在浏览器中启用 URL 集成。NavigationContainer组件接受一个链接 Prop ，它允许您绘制路线图。

    const linking = {
      prefixes: ['https://mychat.com', 'mychat://'],
      config: {
        screens: {
          Chat: 'feed/:sort',
          Profile: 'user',
        },
      },
    };


    function App() {
      return (
        <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
          {/* content */}
        </NavigationContainer>
      );
    }

一旦我们在我们的应用程序中建立了所有的路由或“链接”，我们就可以开始使用 Link如果您使用 react-router-dom，组件可以像在普通的 React Web 应用程序中一样导航。

   import { Link } from '@react-navigation/native';

// ...

   function Home() {
     return <Link to="/profile/jane">Go to Jane's profile</Link>;
   }

这些链接组件应该适用于移动和网络版本。
https://reactnavigation.org/docs/configuring-links/
https://reactnavigation.org/docs/deep-linking/
https://reactnavigation.org/docs/link