javascript - react : how to change page when using react-navigation and react-router?

Question

我正在构建一个 react-native使用 Expo SDK 36 的应用程序。

这使我能够为 iOS 和 Android 等 native 环境创建应用程序，但使用 react-native-web ，也使其可以在网络上运行。

由于 react-navigation不支持浏览器历史记录(导航时窗口位置更改)，建议我仅将官方expo路由库(react-navigation)与 native 应用程序一起使用，并使用 react-router对于网络。

由于我的项目中有两个库，因此我可以使用 myRouter.web.js这将导出使用 react-router 制作的路由器，和myRouter.js这将导出使用react-navigation制作的导航。

这是如何使用react-navigation在页面之间创建链接:

<Button
  title="Go to Details"
  onPress={() => this.props.navigation.navigate('Details')}
/>

这是如何使用react-router在页面之间创建链接:

import { Link } from 'react-router-web';

export default () => <Link to={'/details'}>Go to Details</Link>;

使用这两种语法，如何使用这两种语法在我的应用程序中创建链接，而不在源代码中到处使用这两种语法？

我正在考虑创建一个 Link.js和Link.web.js ，但不确定我应该如何实现它？

例如，Link.js :

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from 'react-navigation-hooks';

export default function Link({ to, screenName, children, ...rest }) {
  const navigation = useNavigation();
  return (
    <Button
      title={children}
      onPress={() => navigation.navigate(screenName)}
      {...rest}
    />
  );
}

和Link.web.js :

import  React from 'react';
import { Link as RRLink } from 'react-router-dom';

export default function Link({ to, screenName, children, ...rest }) {
  return (
    <RRLink
      title={children}
      to={to}
      {...rest}
    >
      {children}
    </RRLink>
  );
}

这将迫使我使用 screenView和to创建<Link />时。这是因为react-navigation没有路径，它只使用一个名称。

我有什么遗漏的地方吗？

Answer 1

react-router 还使用 this.props.history.push 导航到不同的屏幕。您也许可以创建一个接受 history 或 navigation 的函数以及一个如下所示的变量:

function move(hn, path) {
  !!hn.navigate ? hn.navigate(path) : hn.push(path);
}

你可以将它与: move(this.props.history, '/somewhere') 和 move(this.props.navigation, '/somewhere').