feat: 新增umi-preset-react-navigation包，支持使用react-navigation替换react-router。

Author: 徐远翔

packages/umi-plugin-antd-react-native/README.md

@@ -2,6 +2,8 @@
 
 针对[@ant-design/react-native](https://rn.mobile.ant.design/index-cn)的[umi](https://umijs.org/)插件。
 
+_了解如何使用[umi](https://umijs.org/)开发 RN 应用，请移步至：_<a href="https://github.com/xuyuanxiang/umi-react-native#readme" target="_blank">umi-react-native</a>
+
 ## 安装
 
 在 RN 工程目录下，使用 yarn 安装**umi-plugin-antd-react-native**：
@@ -10,7 +12,7 @@
 yarn add umi-plugin-antd-react-native --dev
 ```
 
-在 RN 工程目录下，使用 yarn 安装[@ant-design/react-native](https://github.com/ant-design/ant-design-mobile-rn/blob/master/README.zh-CN.md#%E5%AE%89%E8%A3%85--%E4%BD%BF%E7%94%A8):
+在 RN 工程目录下，使用 yarn 安装`@ant-design/react-native@3.x`:
 
 ```npm
 yarn add @ant-design/react-native
@@ -19,17 +21,20 @@ yarn add @ant-design/react-native
 **链接 @ant-design/react-native 字体图标资源文件：**
 
 ```npm
-yarn react-native link # 等价于: ./node_modules/.bin/react-native link
+yarn react-native link
+# 等价于: ./node_modules/.bin/react-native link
 ```
 
+如需使用`@ant-design/react-native@4.x`请按照：[安装 & 使用](https://github.com/ant-design/ant-design-mobile-rn/blob/master/README.zh-CN.md#%E5%AE%89%E8%A3%85--%E4%BD%BF%E7%94%A8)操作。
+
+## 使用
+
 **umi-plugin-antd-react-native**已经为 @ant-design/react-native 做了[**按需加载**](https://rn.mobile.ant.design/docs/react/introduce-cn#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD)（[babel-plugin-import](https://github.com/ant-design/babel-plugin-import)）的配置。
 
 如果使用 @ant-design/react-native 组件时，出现错误信息：`Unrecognized font family 'antoutline'`
 
 [ant-design/ant-design-mobile-rn#issue-194](https://github.com/ant-design/ant-design-mobile-rn/issues/194)中有解决方案，需要重新链接字体图标。
 
-## 使用
-
 ### 自定义主题/皮肤
 
 目前已经支持：使用 umi [theme 配置](https://umijs.org/config#theme)覆盖 @ant-design/react-native 的[主题](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/style/themes/default.tsx)：

packages/umi-preset-react-navigation/README.md

@@ -1,6 +1,10 @@
 # umi-preset-react-navigation
 
-支持在 RN 应用中 使用 [react-navigation](https://reactnavigation.org/) 替换 [umi](https://umijs.org/) 内置的 [react-router](https://reacttraining.com/react-router/)。
+针对 [react-navigation](https://reactnavigation.org/) 的 [umi](https://umijs.org/) 插件集。
+
+支持在 RN 应用中替换 [umi](https://umijs.org/) 默认的 [react-router](https://reacttraining.com/react-router/)。
+
+内置[react-navigation](https://reactnavigation.org/) `5.x` 版本，需要 [react-native](https://reactnative.dev/) **0.60.0 及以上版本（>=0.60.x）**。
 
 _了解如何使用[umi](https://umijs.org/)开发 RN 应用，请移步至：_<a href="https://github.com/xuyuanxiang/umi-react-native#readme" target="_blank">umi-react-native</a>
 
@@ -20,13 +24,9 @@ _了解如何使用[umi](https://umijs.org/)开发 RN 应用，请移步至：_<
 - react-native-safe-area-context
 - @react-native-community/masked-view
 
-**强烈推荐**使用 RN 0.60.0 及以上版本，否则安装会及其繁琐。
-
-### RN`0.60.x`版本
-
-**umi-preset-react-navigation**内置了[react-navigation](https://reactnavigation.org/)所有依赖最新版本。
+**umi-preset-react-navigation**内置了上面所有依赖。
 
-在 RN 工程根目录，使用 yarn 安装**umi-preset-react-navigation**即可：
+只需在 RN 工程根目录，使用 yarn 安装**umi-preset-react-navigation**即可：
 
 ```npm
 yarn add umi-preset-react-navigation --dev
@@ -40,39 +40,28 @@ cd ios && pod install
 
 **注意：**
 
-虽然有[自动链接](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md)功能，如果还是出现了原生代码报错，在 RN 工程根目录下手动重新链接一下：
+虽然有[自动链接](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md)功能，如果还是发生了意外，在 RN 工程根目录下手动重新链接一下可以解决大部分的出现了原生代码报错：
 
 ```npm
 yarn react-native unlink && yarn react-native link
 # ./node_modules/.bin/react-native unlink && ./node_modules/.bin/react-native link
 ```
 
-每次添加原生依赖，都需要执行：`yarn ios`和`yarn android`重新编译和启动 iOS 和 Android 工程。
-
-**RN`0.60.x`版本安装至此结束。**
-
-### RN`0.50.x`版本
-
-按照[react-navigation](https://reactnavigation.org/)的[安装文档](https://reactnavigation.org/docs/getting-started/#installation)操作，将所有[react-navigation](https://reactnavigation.org/)所需依赖安装到 RN 工程本地。
-
-**一定要逐一查看这些依赖的 README 文档**，因为：
-
-1. 需要根据 RN 版本安装对应依赖的版本，以[react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler#react-native-support)为例，RN 0.57.2 及以上版本，需要安装`react-native-gesture-handler@1.1.x`，**不能使用最新版**；
-2. 有些[react-navigation](https://reactnavigation.org/)的依赖使用 yarn/npm 安装完成，还需要**手动链接**原生 iOS 和 Android 代码，可以按照这些依赖的 README 文档操作。
+每次添加原生依赖后，都需要执行：`yarn ios`和`yarn android`重新编译和启动 iOS 和 Android 工程。
 
 ## 扩展配置
 
 以下是安装**umi-preset-react-navigation**后，扩展的 umi [配置](https://umijs.org/zh-CN/docs/config)：
 
 ### reactNavigation
 
-全都是选填参数，下面示例中填入的是默认值，等价于不填：
+`theme`字段选填，下面示例中填入的是默认值，等价于不填：
 
 ```javascript
 // .umirc.js
 export default {
   reactNavigation: {
-    // 使用 ant-design 默认配色作为 Navigation 的默认主题
+    // 使用 ant-design 默认配色作为导航条的默认主题
     theme: {
       dark: false,
       colors: {
@@ -83,18 +72,10 @@ export default {
         border: '#dddddd',
       },
     },
-    type: 'stack', // Navigator 类型
-    enableSafeAreasSupport: true, // 默认启用对 iOS Safe Areas 的适配/支持
   },
 };
 ```
 
-| 变量名                 | 类型    | 说明                                                   |                 默认值 |
-| :--------------------- | :------ | :----------------------------------------------------- | ---------------------: |
-| type                   | enum    | 导航类型，可选值：`'stack'`, `drawer`, `bottom-tabs`。 |                'stack' |
-| enableSafeAreasSupport | boolean | 是否适配 iOS Safe Areas。                              |                   true |
-| theme                  | object  | 初始主题，将来考虑支持运行时切换主题/皮肤。            | _上面代码示例中所填值_ |
-
 ## 扩展运行时配置
 
 查看 umi 文档，了解什么是：[运行时配置](https://umijs.org/zh-CN/docs/runtime-config)。
@@ -234,13 +215,34 @@ export default HomePage;
 
 **如果页面的`title`属性未设置，则使用`.umirc.js`中的全局[title](https://umijs.org/config#title)。**
 
-## 应用内部页面跳转
+## 页面间跳转
 
-### 使用命令式
+查看 umi 文档：[页面间跳转](https://umijs.org/zh-CN/docs/navigate-between-pages)，姿势保持不变。
 
-### 使用申明式
+使用**声明式**的`Link`组件时需要注意，在 RN 中 与 DOM 存在较大差异：
+
+```jsx
+import React from 'react';
+import { Link } from 'umi';
+import { List } from '@ant-design/react-native';
+
+const Item = List.Item;
+
+function Index() {
+  return (
+    <List>
+      <Link to="/home" component={Item} arrow="horizontal">
+        主页
+      </Link>
+      <Link to="/login" component={Item} arrow="horizontal">
+        登录页
+      </Link>
+    </List>
+  );
+}
+```
 
-### 传递和接收参数
+使用**命令式**跳转页面时，只能使用`history`的 API，**umi-preset-react-navigation**目前还不支持使用[react-navigation](https://reactnavigation.org/)提供的`navigation`来跳转，只能做导航条设置之类的操作。
 
 ## DeepLink
 

packages/umi-preset-react-navigation/package.json

@@ -43,8 +43,6 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/bottom-tabs": "5.4.2",
-    "@react-navigation/drawer": "5.7.2",
     "@react-navigation/native": "5.3.0",
     "@react-navigation/stack": "5.3.3",
     "react-native-gesture-handler": "1.6.1",

packages/umi-preset-react-navigation/src/index.ts

@@ -1,7 +1,6 @@
 export default function () {
   return {
     plugins: [
-      require.resolve('./plugins/generateFiles/react-navigation/createNavigator'),
       require.resolve('./plugins/generateFiles/react-navigation/exports'),
       require.resolve('./plugins/generateFiles/react-navigation/runtime'),
       require.resolve('./plugins/features/reactNavigation'),

packages/umi-preset-react-navigation/src/plugins/features/reactNavigation.ts

@@ -16,13 +16,10 @@ export default (api: IApi) => {
             border: '#dddddd',
           },
         },
-        type: 'stack', // Navigator 类型
-        enableSafeAreasSupport: true, // 默认启用对 iOS Safe Areas 的适配/支持
       },
       schema(joi) {
         return joi
           .object({
-            type: joi.string().allow('stack', 'drawer', 'bottom-tabs').optional(),
             theme: joi
               .object({
                 dark: joi.boolean().required(),
@@ -35,7 +32,6 @@ export default (api: IApi) => {
                 }),
               })
               .optional(),
-            enableSafeAreasSupport: joi.boolean().optional(),
           })
           .optional();
       },

packages/umi-preset-react-navigation/src/plugins/generateFiles/react-navigation/createNavigator.ts

@@ -1,6 +1,6 @@
 import { IApi } from 'umi';
 
-const exportsTpl = `export {
+const CONTENT = `export {
   useNavigation,
   useRoute as useScreen,
   useFocusEffect,
@@ -14,23 +14,20 @@ const exportsTpl = `export {
   CommonActions,
   StackActions,
 } from '@react-navigation/native';
-{{#enableSafeAreasSupport}}
 export {
   SafeAreaProvider,
   SafeAreaView,
   useSafeAreaInsets,
   useSafeAreaFrame,
 } from 'react-native-safe-area-context';
-{{/enableSafeAreasSupport}}
+
 `;
 
 export default (api: IApi) => {
   api.onGenerateFiles(() => {
     api.writeTmpFile({
       path: 'react-navigation/exports.ts',
-      content: api.utils.Mustache.render(exportsTpl, {
-        enableSafeAreasSupport: Boolean(api.config?.reactNavigation?.enableSafeAreasSupport),
-      }),
+      content: CONTENT,
     });
   });
 

packages/umi-preset-react-navigation/src/plugins/generateFiles/react-navigation/exports.ts

@@ -36,7 +36,6 @@ export default (api: IApi) => {
     api.writeTmpFile({
       path: 'react-navigation/runtime.tsx',
       content: Mustache.render(runtimeTpl, {
-        enableSafeAreasSupport: Boolean(api.config?.reactNavigation?.enableSafeAreasSupport),
         loading:
           typeof dynamicImport === 'object' && typeof dynamicImport.loading === 'string'
             ? `require('${dynamicImport.loading}').default`

packages/umi-preset-react-navigation/src/plugins/generateFiles/react-navigation/runtime.ts

@@ -3,23 +3,6 @@ export default `import React from 'react';
 import {ApplyPluginsType, dynamic} from 'umi';
 import {NavigationContainer, NavigationState} from '@react-navigation/native';
 import {Navigation} from 'umi-renderer-react-navigation';
-import createNavigator from './createNavigator';
-{{#enableSafeAreasSupport}}
-import {SafeAreaProvider, SafeAreaView} from './exports';
-
-export function patchRoutes({routes}) {
-  if (Array.isArray(routes)) {
-    for (const route of routes) {
-      if (Array.isArray(route.wrappers)) {
-        route.wrappers.push(SafeAreaView);
-      } else {
-        route.wrappers = [SafeAreaView];
-      }
-    }
-  }
-  console.log('patchRoutes:', routes);
-}
-{{/enableSafeAreasSupport}}
 
 export function rootContainer(container, {plugin, routes, history}) {
   return React.createElement(
@@ -46,37 +29,6 @@ export function rootContainer(container, {plugin, routes, history}) {
           async: true,
         });
         return () =>
-          {{#enableSafeAreasSupport}}
-          React.createElement(
-            SafeAreaProvider,
-            null,
-            React.createElement(
-              NavigationContainer,
-              {
-                theme: {{{ theme }}},
-                initialState,
-                onStateChange: (state?: NavigationState): void => {
-                  plugin.applyPlugins({
-                    key: 'onReactNavigationStateChange',
-                    type: ApplyPluginsType.event,
-                    initialValue: state,
-                    async: true,
-                  });
-                },
-              },
-              React.createElement(Navigation, {
-                routes, 
-                history, 
-                navigator: createNavigator(), 
-                plugin,
-                {{#enableTitle}}
-                defaultTitle: '{{{ defaultTitle }}}',
-                {{/enableTitle}}
-              }),
-            ),
-          );
-          {{/enableSafeAreasSupport}}
-          {{^enableSafeAreasSupport}}
           React.createElement(
             NavigationContainer,
             {
@@ -94,14 +46,12 @@ export function rootContainer(container, {plugin, routes, history}) {
             React.createElement(Navigation, {
               routes, 
               history, 
-              navigator: createNavigator(), 
               plugin,
               {{#enableTitle}}
               defaultTitle: '{{{ defaultTitle }}}',
               {{/enableTitle}}
             }),
           );
-          {{/enableSafeAreasSupport}}
       },
     }),
   );

packages/umi-preset-react-navigation/src/plugins/generateFiles/react-navigation/runtimeTpl.ts

@@ -2,14 +2,8 @@
 
 针对 [react-navigation](https://reactnavigation.org/) 的 [umi](https://umijs.org/) 渲染器。
 
-umi 默认渲染器： `@umijs/renderer-react` 使用[react-router](https://reacttraining.com/react-router/)渲染路由的代码逻辑无法替换。
+开发者无须单独安装该依赖，需要和 <a href="https://github.com/xuyuanxiang/umi-react-native/tree/master/packages/umi-preset-react-navigation#readme" target="_blank">umi-preset-react-navigation</a> 配套使用，目前仅支持 Native，暂不考虑 Web。
 
-只能替换整个`@umijs/renderer-react`，于是产生了这个项目。
+_umi 默认渲染器：`@umijs/renderer-react` 使用[react-router](https://reacttraining.com/react-router/)渲染路由。_
 
-## 如何使用 [umi](https://umijs.org/) 开发 RN 应用
-
-请移步至：<a href="https://github.com/xuyuanxiang/umi-react-native#readme" target="_blank">umi-react-native</a>。
-
-## 如何使用 [react-navigation](https://reactnavigation.org/) 替换 umi 默认的 [react-router](https://reacttraining.com/react-router/)
-
-请移步至：<a href="https://github.com/xuyuanxiang/umi-react-native/tree/master/packages/umi-preset-react-navigation#readme" target="_blank">umi-preset-react-navigation</a>
+_了解如何使用[umi](https://umijs.org/)开发 RN 应用，请移步至：_<a href="https://github.com/xuyuanxiang/umi-react-native#readme" target="_blank">umi-react-native</a>

packages/umi-renderer-react-navigation/README.md

@@ -36,10 +36,14 @@
     "url": "https://github.com/xuyuanxiang/umi-react-native/issues"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^5.3.0",
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
     "umi": "^3.0.0"
   },
   "dependencies": {
+    "@react-navigation/native": "5.3.0",
+    "@react-navigation/routers": "5.4.4",
+    "@react-navigation/stack": "5.3.3",
     "@umijs/renderer-react": "^3.0.0",
     "blueimp-md5": "2.15.0",
     "url-join": "4.0.1"