反应：如何在使用react-navigation和react-router时更改页面？

Question

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

这使我可以为原生环境（如iOS和Android）创建应用程序，但要使用react-native-web，使其也可以在Web上运行。

由于react-navigation不支持浏览器历史记录（导航时更改窗口位置），我建议仅对本机应用程序使用官方的expo路由库（反应导航），并使用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

反应路由器还使用this.props.history.push导航到不同的屏幕。您可能只能够创建一个接受history或navigation的函数以及一个类似于它的变量：

Answer 2

使用下面的两个链接，可以完成：