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

【问题标题】：how to use react-native-web and react-navigation together and access from web url如何一起使用 react-native-web 和 react-navigation 并从 web url 访问
【发布时间】：2018-08-17 14:30:41
【问题描述】：

更新：

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

起源：

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

【问题讨论】：

你能分享一些代码，以便我们看看我们可以使用什么？
我真的不认为这是完全可能的（不确定我是否正确解释了你的问题），为什么你必须使用 react-navigation 呢？您的<WebView/> 组件中的网页中不是已经包含navigatoin 吗？
嗨@joshkmartinez 感谢您的回复。并且，您可以查看：github.com/react-navigation/react-navigation-web 官方网络支持。我很懒，这就是我想使用 react-navigation 的原因。
哦...所以你开发了一个 react-native-app 并想在网络上使用它？
是的，原生应用很大，有时只是完成了一个 PWA。

标签： react-native react-navigation react-router-v4 react-native-web react-router-native

【解决方案1】：

我不确定您发布此问题时的情况，但您现在绝对可以在 web 上使用 react-navigation。

现在通过 Linking，我们可以在 Android 和 iOS 上处理 React Native 应用程序中的深层链接，此外在网络上使用时在浏览器中启用 URL 集成。

NavigationContainer 组件包含一个链接道具，可让您绘制路线。


    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

【讨论】：

【解决方案2】：

我认为这不可能，因为 ReactNavigation 使用的是内部状态对象。请记住，它是移动框架，它没有 URL 路由的概念。我还想指出，即使 RN 声称支持 Web，您也需要小心选择组件，因为并非所有行为都是相同的（根据记忆，FlatList 不支持触摸滚动）

【讨论】：