时间戳

首页 > 解决方案 > React：使用 react-navigation 和 react-router 时如何更改页面？

javascript - React：使用 react-navigation 和 react-router 时如何更改页面？

问题描述

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

这使我可以为 iOS 和 Android 等本地环境创建应用程序，但使用react-native-web, 也可以使其在 Web 上运行。

由于react-navigation不支持浏览器历史记录（导航时窗口位置更改），因此建议我仅将官方 expo 路由库（react-navigation）与本机应用程序一起使用，并使用react-router for web .

由于我的项目中有两个库，因此我可以使用将myRouter.web.js导出由 .react-routermyRouter.js

这是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.jsand 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和。这是因为 react-navigation 没有路径，它只是使用名称。to<Link />

我错过了什么吗？

标签： javascriptreactjsreact-routerreact-navigationexpo

解决方案

react-router 还用于this.props.history.push导航到不同的屏幕。您可能只能创建一个函数，该函数接受historyornavigation和一个变量，如下所示：

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

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

推荐阅读