feat: support mutiply bundlers: react-native-cli, haul, expo

Author: 徐远翔

.gitattributes

@@ -7,4 +7,4 @@
 *.woff2 binary
 *.jar binary
 *.pbxproj -text
-
+*.ttf binary

example/android/app/src/main/assets/fonts/antfill.ttf

@@ -20,6 +20,8 @@
 		591F4E3659397AE1C0A4F4C0 /* libPods-RNUMITestApp-RNUMITestAppTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 70E1EACDA399EB87AEAC6136 /* libPods-RNUMITestApp-RNUMITestAppTests.a */; };
 		A2FAA3AC8AE4043AA37BB78F /* libPods-RNUMITestApp.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 99559606A31FEC53CE934C6F /* libPods-RNUMITestApp.a */; };
 		F9A2961D1159DB8736548177 /* libPods-RNUMITestApp-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = BE7C092CE90A19B02CC6652E /* libPods-RNUMITestApp-tvOSTests.a */; };
+		70896E68FBED41819E68AC24 /* antfill.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 9A82B98A56B7419F872753FF /* antfill.ttf */; };
+		FE52E9DBDE9E43B0B4D1299C /* antoutline.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7B8A42DD87F3415FAC2708E1 /* antoutline.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -67,6 +69,8 @@
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
 		F7023ABB92180D3187159891 /* Pods-RNUMITestApp.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RNUMITestApp.debug.xcconfig"; path = "Target Support Files/Pods-RNUMITestApp/Pods-RNUMITestApp.debug.xcconfig"; sourceTree = "<group>"; };
+		9A82B98A56B7419F872753FF /* antfill.ttf */ = {isa = PBXFileReference; name = "antfill.ttf"; path = "../node_modules/@ant-design/icons-react-native/fonts/antfill.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		7B8A42DD87F3415FAC2708E1 /* antoutline.ttf */ = {isa = PBXFileReference; name = "antoutline.ttf"; path = "../node_modules/@ant-design/icons-react-native/fonts/antoutline.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -165,6 +169,7 @@
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
 				9FB6EF2DD427E82299032FCA /* Pods */,
+				E431C99AD19A44568EBBE2D3 /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -198,6 +203,16 @@
 			path = Pods;
 			sourceTree = "<group>";
 		};
+		E431C99AD19A44568EBBE2D3 /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				9A82B98A56B7419F872753FF /* antfill.ttf */,
+				7B8A42DD87F3415FAC2708E1 /* antoutline.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -340,6 +355,8 @@
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
+				70896E68FBED41819E68AC24 /* antfill.ttf in Resources */,
+				FE52E9DBDE9E43B0B4D1299C /* antoutline.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

example/android/app/src/main/assets/fonts/antoutline.ttf

@@ -38,7 +38,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -53,5 +53,10 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>antfill.ttf</string>
+		<string>antoutline.ttf</string>
+	</array>
 </dict>
 </plist>

example/ios/RNUMITestApp.xcodeproj/project.pbxproj

@@ -5,6 +5,7 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
+    "watch": "umi g rn --dev",
     "start": "react-native start",
     "test": "jest"
   },

example/ios/RNUMITestApp/Info.plist

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+function HomePage() {
+  return (
+    <View>
+      <Text>Home Screen</Text>
+    </View>
+  );
+}
+
+HomePage.title = 'Home Page';
+
+export default HomePage;

example/package.json

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+function LoginPage() {
+  return (
+    <View>
+      <Text>Login Screen</Text>
+    </View>
+  );
+}
+
+LoginPage.title = 'Login Page';
+
+export default LoginPage;

example/pages/home.js

@@ -49,8 +49,8 @@
   },
   "dependencies": {
     "@types/react-router-native": "5.1.0",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "memoizerific": "^1.11.3",
+    "babel-plugin-module-resolver": "4.0.0",
+    "memoizerific": "1.11.3",
     "react-router-native": "5.1.2"
   }
 }

example/pages/login.js

@@ -1,10 +1,8 @@
 export default function () {
   return {
     plugins: [
-      require.resolve('./plugins/commands/reactNative'),
       require.resolve('./plugins/features/reactNative'),
       require.resolve('./plugins/generateFiles/react-native/exports'),
-      // require.resolve('./plugins/generateFiles/react-native/haulConfig'),
       require.resolve('./plugins/generateFiles/react-native/polyfill'),
       require.resolve('./plugins/generateFiles/react-native/routes'),
       require.resolve('./plugins/generateFiles/react-native/runtime'),

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

@@ -1,6 +1,6 @@
 import { IApi } from 'umi';
 import { dirname, join } from 'path';
-import { readFileSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import { EOL } from 'os';
 import { assertExists } from '../../utils';
 
@@ -36,29 +36,36 @@ export default (api: IApi) => {
     join(absNodeModulesPath, 'react-native'),
     true,
   );
-
+  const EXPO_PATH = getUserLibDir(join('expo', 'package.json'), join(absNodeModulesPath, 'expo'));
+  const HAUL_CLI_PATH = getUserLibDir(join('@haul-bundler', 'cli', 'package.json'), join(absNodeModulesPath, 'expo'));
   assertExists(REACT_NATIVE_PATH);
 
+  const isExpo = existsSync(EXPO_PATH);
+  const isHaul = existsSync(HAUL_CLI_PATH);
+
   const { version } = require(join(REACT_NATIVE_PATH, 'package.json'));
 
   let appKey;
   try {
-    const appJson = JSON.parse(
-      readFileSync(getUserLibDir('app.json', join(absSrcPath, 'app.json'), false, absSrcPath), 'utf8'),
-    );
-    appKey = appJson.name;
+    if (!isExpo) {
+      const appJson = JSON.parse(
+        readFileSync(getUserLibDir('app.json', join(absSrcPath, 'app.json'), false, absSrcPath), 'utf8'),
+      );
+      appKey = appJson.name;
+    }
   } catch (ignored) {}
 
   // umi-preset-react-native 扩展配置
   api.describe({
     key: 'reactNative',
     config: {
-      default: { appKey, version },
+      default: { appKey, version, bundler: isExpo ? 'expo' : isHaul ? 'haul' : 'react-native-cli' },
       schema(joi) {
         return joi
           .object({
             appKey: joi.string(), // moduleName  app.json#name
             version: joi.string(), // RN 版本号
+            bundler: joi.allow('expo', 'react-native-cli', 'haul'),
           })
           .optional();
       },
@@ -79,8 +86,6 @@ export default (api: IApi) => {
       config.history,
     );
 
-    config.extraBabelPresets = ['module:metro-react-native-babel-preset'];
-
     return config;
   });
 
@@ -102,15 +107,17 @@ export default (api: IApi) => {
 
   // 启动时检查
   api.onStart(() => {
-    // appKey 一定不能为空，否则 RN 引用没法注册/部署/启动。
-    if (!api.config?.reactNative?.appKey) {
-      api.logger
-        .error(`"reactNative.appKey" 未配置！${EOL}1. 请在工程根目录下的 app.json 文件中为"name"字段指定一个值，作为"appKey"；${EOL}2. 也可以在 umi 配置文件（比如：.umirc.js）中设置：${EOL}export default {
+    if (!isExpo) {
+      // 使用 haul 和 react-native-cli 时，appKey 一定不能为空，否则 RN 引用没法注册/部署/启动。
+      if (!api.config?.reactNative?.appKey) {
+        api.logger
+          .error(`"reactNative.appKey" 未配置！${EOL}1. 请在工程根目录下的 app.json 文件中为"name"字段指定一个值，作为"appKey"；${EOL}2. 也可以在 umi 配置文件（比如：.umirc.js）中设置：${EOL}export default {
   reactNative: {
      appKey: '将这里替换为你的值',
   },
 };。${EOL}小贴士：${EOL}  "appKey" 即 RN JS 代码域中: "AppRegistry.registerComponent(appKey, componentProvider);"的第一个参数，也是 iOS/Android 原生代码中加载 bundle 时所需的 "moduleName"；${EOL}  其值是使用 react-native 命令行工具初始化新建 RN 工程时所指定的项目名称，存储在工程根目录下 app.json 文件的 "name" 字段中。`);
-      throw new TypeError('"react-native.appKey" 未配置');
+        throw new TypeError('"react-native.appKey" 未配置');
+      }
     }
 
     // mountElementId 必须为空字符串，false也不行。