27

更新：

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 这样的导航器。和想法？

4

2 回答 2

2

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

现在通过 Linking，我们可以在 Android 和 iOS 上处理 React Native 应用程序中的深层链接，以及在 Web 上使用时在浏览器中启用 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 web 应用程序中一样，如果你使用了 react-router-dom。


   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

于 2020-09-08T21:20:00.667 回答
0

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

于 2019-12-06T02:51:14.880 回答