fix: 替换@umijs/renderer-react，解决RN Fast Refresh 触发时 umi runtime plugin: rootContainer 未执行的问题

Author: 徐远翔

CHANGELOG.md

@@ -1,4 +1,14 @@
-## <a target="_blank" href="https://github.com/xuyuanxiang/umi-react-native/compare/v0.2.0-alpha.2...v"></a> (2020-05-18)
+## <a target="_blank" href="https://github.com/xuyuanxiang/umi-react-native/compare/v0.2.0-alpha.3...v"></a> (2020-05-18)
+
+## <a target="_blank" href="https://github.com/xuyuanxiang/umi-react-native/compare/v0.2.0-alpha.2...v0.2.0-alpha.3">0.2.0-alpha.3</a> (2020-05-18)
+
+
+### 新功能
+
+* React Naitve CLI hooks supporting (<a target="_blank" href="https://github.com/xuyuanxiang/umi-react-native/commit/3065d12">3065d12</a>)
+
+
+
 
 ## <a target="_blank" href="https://github.com/xuyuanxiang/umi-react-native/compare/v0.2.0-alpha.1...v0.2.0-alpha.2">0.2.0-alpha.2</a> (2020-05-18)
 

packages/umi-preset-react-native/hooks/prebundle.js

@@ -6,7 +6,7 @@ const { execFileSync } = require('child_process');
 const cwd = process.cwd();
 const umi = join(cwd, 'node_modules', 'umi', 'bin', 'umi.js');
 
-const child = execFileSync(umi, ['g', 'rn', '--dev'], { cwd, stdio: 'inherit' });
+const child = execFileSync(umi, ['g', 'rn'], { cwd, stdio: 'inherit' });
 
 child.on('close', (code) => {
   process.exit(code);

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

@@ -47,11 +47,5 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "memoizerific": "^1.11.3",
     "react-router-native": "5.1.2"
-  },
-  "rnpm": {
-    "hooks": {
-      "prestart": "./hooks/prestart.js",
-      "prebundle": "./hooks/prebundle.js"
-    }
   }
 }

packages/umi-preset-react-native/react-native.config.js

@@ -1,5 +1,9 @@
 module.exports = {
   dependency: {
+    platforms: {
+      ios: {},
+      android: {},
+    },
     hooks: {
       prestart: './hooks/prestart.js',
       prebundle: './hooks/prebundle.js',

packages/umi-preset-react-native/src/plugins/generateFiles/react-native/polyfill.ts

@@ -6,17 +6,6 @@ if (global.window === undefined) {
   global.window = global;
 }
 
-// hot module replacement
-// @ts-ignore
-if (module.hot) {
-  // @ts-ignore
-  const accept = module.hot.accept;
-  // @ts-ignore
-  module.hot.accept = (path, fn) => {
-    accept(fn);
-  };
-}
-
 `;
 
 export default (api: IApi) => {
@@ -32,6 +21,29 @@ export default (api: IApi) => {
     return memo;
   });
 
+  api.addEntryCode(
+    () => `// @ts-ignore
+let accept: unknown;
+// @ts-ignore
+if (module.hot) {
+  // @ts-ignore
+  if (!accept) {
+    accept = module.hot.accept;
+  }
+  // @ts-ignore
+  module.hot.accept = function (path, fn) {
+    console.info('path=', path, 'fn=', fn);
+    if (typeof path === 'function' && typeof accept === 'function') {
+      accept(path);
+    }
+    if (typeof fn === 'function' && typeof accept === 'function') {
+      accept(fn);
+    }
+  };
+}
+  `,
+  );
+
   api.onGenerateFiles(() => {
     api.writeTmpFile({
       path: 'react-native/polyfill.ts',

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

@@ -50,18 +50,21 @@ export default (api: IApi) => {
 
   api.addRuntimePlugin(() => [join(api.paths.absTmpPath || '', 'react-navigation', 'runtime')]);
 
+  api.modifyRendererPath(() =>
+    winPath(
+      getUserLibDir(
+        'umi-renderer-react-navigation/package.json',
+        dirname(require.resolve('umi-renderer-react-navigation/package.json')),
+        true,
+      ),
+    ),
+  );
+
   api.onGenerateFiles(() => {
     const dynamicImport = api.config.dynamicImport;
     api.writeTmpFile({
       path: 'react-navigation/runtime.tsx',
       content: Mustache.render(runtimeTpl, {
-        rendererPath: winPath(
-          getUserLibDir(
-            'umi-renderer-react-navigation/package.json',
-            dirname(require.resolve('umi-renderer-react-navigation/package.json')),
-            true,
-          ),
-        ),
         reactNavigationPath: winPath(
           getUserLibDir(
             '@react-navigation/native/package.json',
@@ -74,8 +77,6 @@ export default (api: IApi) => {
             ? `require('${dynamicImport.loading}').default`
             : '',
         theme: JSON.stringify(api.config?.reactNavigation?.theme || {}, null, 2),
-        enableTitle: api.config.title !== false,
-        defaultTitle: api.config.title || '',
       }),
     });
   });

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

@@ -1,10 +1,9 @@
 export default `import React from 'react';
 {{^loading}}import {View, Text} from 'react-native';{{/loading}}
 import {ApplyPluginsType, dynamic} from 'umi';
-import {Navigation} from '{{{ rendererPath }}}';
 import {NavigationContainer} from '{{{ reactNavigationPath }}}';
 
-export function rootContainer(container, {plugin, routes, history}) {
+export function rootContainer(container, {plugin}) {
   return React.createElement(
     dynamic({
       loading: plugin.applyPlugins({
@@ -43,14 +42,7 @@ export function rootContainer(container, {plugin, routes, history}) {
                 });
               },
             },
-            React.createElement(Navigation, {
-              routes, 
-              history, 
-              plugin,
-              {{#enableTitle}}
-              defaultTitle: '{{{ defaultTitle }}}',
-              {{/enableTitle}}
-            }),
+            container,
           );
       },
     }),

packages/umi-renderer-react-navigation/src/index.native.ts

@@ -1,2 +1,3 @@
 export * from './createHistoryNavigator';
 export * from './Navigation';
+export * from './renderClient';

packages/umi-renderer-react-navigation/src/renderClient.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ApplyPluginsType, Plugin } from 'umi';
+import { IRoute } from '@umijs/renderer-react';
+import { Navigation } from './Navigation';
+
+interface IRouterComponentProps {
+  routes: IRoute[];
+  plugin: Plugin;
+  history: any;
+  ssrProps?: object;
+  defaultTitle?: string;
+}
+
+interface IOpts extends IRouterComponentProps {
+  rootElement?: string | HTMLElement;
+}
+
+export function renderClient(opts: IOpts) {
+  return opts.plugin.applyPlugins({
+    type: ApplyPluginsType.modify,
+    key: 'rootContainer',
+    initialValue: (
+      <Navigation history={opts.history} routes={opts.routes} plugin={opts.plugin} defaultTitle={opts.defaultTitle} />
+    ),
+    args: {
+      history: opts.history,
+      routes: opts.routes,
+      plugin: opts.plugin,
+    },
+  });
+}