feat: Work with HOC: withRouter.

徐远翔 · 徐远翔 · commit d9f0d49ca1b8 · 2020-05-15T11:07:18.000+08:00
diff --git a/package.json b/package.json
@@ -4,8 +4,9 @@
   "scripts": {
     "bootstrap": "lerna bootstrap",
     "clean": "rimraf packages/*/lib",
+    "lint": "eslint packages/*/src/**/*.{ts,tsx}",
     "build": "cross-env NODE_ENV=production lerna run build",
-    "watch": "cross-env NODE_ENV=development lerna run watch --parallel --concurrency 5",
+    "watch": "cross-env NODE_ENV=development lerna run watch --parallel --concurrency 4",
     "test": "cross-env NODE_ENV=test jest --coverage",
     "changelog": "node scripts/changelog",
     "prerelease": "yarn build",
diff --git a/packages/umi-preset-react-navigation/README.md b/packages/umi-preset-react-navigation/README.md
@@ -258,6 +258,42 @@ function Index() {
 
 使用**命令式**跳转页面时，只能使用`history`的 API，**umi-preset-react-navigation**目前还不支持使用[react-navigation](https://reactnavigation.org/)提供的`navigation`来跳转，只能做导航条设置之类的操作。
 
+## 页面间传递/接收参数
+
+在`IndexPage`点击`Link`，携带`query`参数路由到`HomePage`:
+
+```jsx
+import React from 'react';
+import { Link } from 'umi';
+import { List } from '@ant-design/react-native';
+
+const Item = List.Item;
+
+export default function IndexPage() {
+  return (
+    <List>
+      <Link to="/home?name=bar" component={Item} arrow="horizontal">
+        主页
+      </Link>
+    </List>
+  );
+}
+```
+
+```jsx
+export default function HomePage({ route }) {
+  console.log(route); // route 属性字段查看下面
+
+  // ...
+}
+```
+
+`route`属性示例：
+
+```json
+{ "key": "/home-WnnfQomYXFls0kS0v0lxo", "name": "/home", "params": { "name": "bar" } }
+```
+
 ## DeepLink
 
 > 什么是 DeepLink ？
diff --git a/packages/umi-preset-react-navigation/package.json b/packages/umi-preset-react-navigation/package.json
@@ -42,8 +42,6 @@
     "umi": "^3.0.0"
   },
   "dependencies": {
-    "@react-navigation/native": "5.3.0",
-    "@react-navigation/stack": "5.3.3",
     "umi-renderer-react-navigation": "^0.1.0-alpha.2"
   }
 }
diff --git a/packages/umi-preset-react-navigation/src/plugins/features/reactNavigation.ts b/packages/umi-preset-react-navigation/src/plugins/features/reactNavigation.ts
@@ -1,6 +1,11 @@
 import { IApi } from 'umi';
+import { dirname } from 'path';
 
 export default (api: IApi) => {
+  const {
+    utils: { resolve, winPath },
+    paths,
+  } = api;
   api.describe({
     key: 'reactNavigation',
     config: {
@@ -37,4 +42,33 @@ export default (api: IApi) => {
       },
     },
   });
+
+  /**
+   * 这些依赖包含原生代码，必须安装到用户工程本地，不能由插件内置。
+   * 原因：
+   *  1. 似乎在用户工程 package.json 的 dependencies 字段中，RN 0.60.x 的自动链接才能生效；
+   *  2. 比如如果存在两份 react-native-screens，会重复注册 Native Module，导致运行错误。
+   */
+  const libs = [
+    '@react-native-community/masked-view',
+    'react-native-gesture-handler',
+    'react-native-reanimated',
+    'react-native-safe-area-context',
+    'react-native-screens',
+  ];
+
+  /**
+   * react-navigation 运行时 需要引入这些依赖
+   * 必须将这些依赖库通过 alias 映射到 用户工程 node_modules 下的路径才能加载到
+   */
+  api.chainWebpack((memo) => {
+    libs.forEach((name) => {
+      memo.resolve.alias.set(
+        name,
+        // RN 使用 Haste Module，专门针对 RN 的 依赖库 通常使用 CommonJS Module 的方式都没法获取到入口文件
+        winPath(dirname(resolve.sync(`${name}/package.json`, { basedir: paths.absSrcPath }))),
+      );
+    });
+    return memo;
+  });
 };
diff --git a/packages/umi-preset-react-navigation/src/plugins/generateFiles/react-navigation/exports.ts b/packages/umi-preset-react-navigation/src/plugins/generateFiles/react-navigation/exports.ts
@@ -1,6 +1,7 @@
 import { IApi } from 'umi';
+import { dirname } from 'path';
 
-const CONTENT = `export {
+const TEMPLATE = `export {
   useNavigation,
   useRoute as useScreen,
   useFocusEffect,
@@ -13,21 +14,20 @@ const CONTENT = `export {
   useScrollToTop,
   CommonActions,
   StackActions,
-} from '@react-navigation/native';
-export {
-  SafeAreaProvider,
-  SafeAreaView,
-  useSafeAreaInsets,
-  useSafeAreaFrame,
-} from 'react-native-safe-area-context';
+} from '{{{ reactNavigationPath }}}';
 
 `;
 
 export default (api: IApi) => {
+  const {
+    utils: { Mustache, winPath },
+  } = api;
   api.onGenerateFiles(() => {
     api.writeTmpFile({
       path: 'react-navigation/exports.ts',
-      content: CONTENT,
+      content: Mustache.render(TEMPLATE, {
+        reactNavigationPath: winPath(dirname(require.resolve('@react-navigation/native/package.json'))),
+      }),
     });
   });
 
diff --git a/packages/umi-preset-react-navigation/src/plugins/generateFiles/react-navigation/runtime.ts b/packages/umi-preset-react-navigation/src/plugins/generateFiles/react-navigation/runtime.ts
@@ -1,20 +1,17 @@
 import { IApi } from 'umi';
 import { dirname, join } from 'path';
 import runtimeTpl from './runtimeTpl';
-import { dependencies } from '../../../../package.json';
 
 export default (api: IApi) => {
   const {
     utils: { Mustache, winPath },
   } = api;
 
-  api.addProjectFirstLibraries(() =>
-    Object.keys(dependencies).map((name) => ({
-      name,
-      path: winPath(dirname(require.resolve(`${name}/package.json`))),
-    })),
-  );
-  api.addEntryImportsAhead(() => [{ source: 'react-native-gesture-handler' }]);
+  api.addEntryImportsAhead(() => [
+    {
+      source: 'react-native-gesture-handler',
+    },
+  ]);
   api.addEntryImports(() => [
     {
       specifier: '{enableScreens}',
@@ -36,6 +33,8 @@ export default (api: IApi) => {
     api.writeTmpFile({
       path: 'react-navigation/runtime.tsx',
       content: Mustache.render(runtimeTpl, {
+        rendererPath: winPath(dirname(require.resolve('umi-renderer-react-navigation/package.json'))),
+        reactNavigationPath: winPath(dirname(require.resolve('@react-navigation/native/package.json'))),
         loading:
           typeof dynamicImport === 'object' && typeof dynamicImport.loading === 'string'
             ? `require('${dynamicImport.loading}').default`
diff --git a/packages/umi-preset-react-navigation/src/plugins/generateFiles/react-navigation/runtimeTpl.ts b/packages/umi-preset-react-navigation/src/plugins/generateFiles/react-navigation/runtimeTpl.ts
@@ -1,8 +1,8 @@
 export default `import React from 'react';
 {{^loading}}import {View, Text} from 'react-native';{{/loading}}
 import {ApplyPluginsType, dynamic} from 'umi';
-import {NavigationContainer, NavigationState} from '@react-navigation/native';
-import {Navigation} from 'umi-renderer-react-navigation';
+import {Navigation} from '{{{ rendererPath }}}';
+import {NavigationContainer} from '{{{ reactNavigationPath }}}';
 
 export function rootContainer(container, {plugin, routes, history}) {
   return React.createElement(
@@ -34,7 +34,7 @@ export function rootContainer(container, {plugin, routes, history}) {
             {
               theme: {{{ theme }}},
               initialState,
-              onStateChange: (state?: NavigationState): void => {
+              onStateChange: (state: any): void => {
                 plugin.applyPlugins({
                   key: 'onReactNavigationStateChange',
                   type: ApplyPluginsType.event,
diff --git a/packages/umi-renderer-react-navigation/src/Navigation.tsx b/packages/umi-renderer-react-navigation/src/Navigation.tsx
@@ -109,19 +109,22 @@ export function Navigation(props: INavigationProps) {
       <Navigator initialRouteName="/" history={history}>
         {screens.map(({ key, component: Component, options: { routeMatchOpts, title, ...options }, ...rest }, idx) => (
           <Screen {...rest} key={key || `screen_${idx}`} options={{ ...options, title: title || defaultTitle }}>
-            {({ route: screen, ...props }) => {
-              const match = matchPath(history.location.pathname, routeMatchOpts) || context.match;
+            {(props) => {
               const newProps = {
                 ...rests,
                 ...extraProps,
-                history,
-                location: history.location,
-                route: routeMatchOpts,
-                match,
-                screen, // 避免和 umi 约定注入的 route 命名冲突，这里将 react-navigation 注入的 route 更换为 screen。
                 ...props,
               };
-              return <Component {...newProps} />;
+              return (
+                <RouterContext.Provider
+                  value={{
+                    ...context,
+                    match: matchPath(history.location.pathname, routeMatchOpts) || context.match,
+                  }}
+                >
+                  <Component {...newProps} />
+                </RouterContext.Provider>
+              );
             }}
           </Screen>
         ))}

Original file line number	Diff line number	Diff line change
`@@ -42,8 +42,6 @@`
`42`	`42`	`"umi": "^3.0.0"`
`43`	`43`	`},`
`44`	`44`	`"dependencies": {`
`45`		`- "@react-navigation/native": "5.3.0",`
`46`		`- "@react-navigation/stack": "5.3.3",`
`47`	`45`	`"umi-renderer-react-navigation": "^0.1.0-alpha.2"`
`48`	`46`	`}`
`49`	`47`	`}`