支持svg

config/native/metro.config.js

@@ -6,8 +6,8 @@ const watchFolders = process.env.NODE_ENV === 'production' ? ['../src', '../node
 ];
 
 const sourceExts = (process.env.NODE_ENV === 'production' || process.env.PROD === 'true') ?
-    ['prod.ts', 'ts', 'tsx', 'prod.js', 'js', 'jsx', 'less', 'json'] :
+    ['prod.ts', 'ts', 'tsx', 'prod.js', 'js', 'jsx', 'less', 'json', 'svg'] :
-    ['dev.ts', 'ts', 'tsx', 'dev.js', 'js', 'jsx', 'less', 'json'];
+    ['dev.ts', 'ts', 'tsx', 'dev.js', 'js', 'jsx', 'less', 'json', 'svg'];
 
 const NullModules = ['fs', 'url'];
 /**

config/native/transformer.js

@@ -15,6 +15,9 @@ const traverse = require('@babel/traverse').default;
 const t = require('@babel/types');
 const path = require('path');
 const less = require('less');
+const svgTransformer = require('react-native-svg-transformer');
+const lessTransformer = require('react-native-less-transformer');
+
 const css2rn = require("css-to-react-native-transform").default;
 const { parseSync, transformFromAstSync, transformSync: babelTransform } = require("@babel/core");
 const nullthrows = require("nullthrows");
@@ -94,12 +97,16 @@ function transform({ filename, options, plugins, src }) {
         };
 
         if (filename.endsWith('less')) {
-            return renderToCSS({ src, filename, options }).then((css) => {
+            // return renderToCSS({ src, filename, options }).then((css) => {
-                const cssObject = renderCSSToReactNative(css);
+            //     const cssObject = renderCSSToReactNative(css);
-                const newSrc = `module.exports = ${JSON.stringify(cssObject)}`;
+            //     const newSrc = `module.exports = ${JSON.stringify(cssObject)}`;
-                return transInner(newSrc);
+            //     return transInner(newSrc);
-            });
+            // });
+            return lessTransformer.transform({ src, filename, options });
         }
+        else if (filename.endsWith('.svg')) {
+            return svgTransformer.transform({ src, filename, options });
+        } 
         
         return transInner(src);
     } finally {

package.json

@@ -109,6 +109,8 @@
         "react-app-polyfill": "^3.0.0",
         "react-dev-utils": "^12.0.1",
         "react-native": "^0.72.7",
+        "react-native-less-transformer": "^1.4.1",
+        "react-native-svg-transformer": "^1.2.0",
         "react-refresh": "^0.11.0",
         "required-path": "^1.0.1",
         "resolve": "^1.20.0",

src/build.ts

@@ -25,15 +25,15 @@ export default async function build(cmd: any) {
     makeLocale('', true);
     //ts类型检查 waring 还是error,
     //主要web受影响，error级别的话 控制台和网页都报错，warning级别的话 控制台报错
+    // development/staging/production
     const TSC_COMPILE_ON_ERROR = cmd.check !== 'error';
     Success(
         `${success(
             `build ${cmd.target} environment:${cmd.mode} ${
-                cmd.mode !== 'production'
+                ['development'].includes(cmd.mode) ? `server:${!!cmd.prod}` : ''
-                    ? `server:${!!cmd.prod}`
-                    : ''
             } ${
-                cmd.target !== 'web' && cmd.mode !== 'production'
+                ['mp', 'wechatMp'].includes(cmd.target) &&
+                ['development'].includes(cmd.mode)
                     ? `split:${!!cmd.split}`
                     : ''
             }`
@@ -86,7 +86,7 @@ export default async function build(cmd: any) {
                 !!cmd.memoryLimit && `MEMORY_LIMIT=${cmd.memoryLimit}`,
                 `node`,
                 cmd.memoryLimit && `--max_old_space_size=${cmd.memoryLimit}`,
-                require.resolve(
+                resolve(
                     `../scripts/${
                         cmd.mode === 'production'
                             ? 'build-web.js'
@@ -104,11 +104,13 @@ export default async function build(cmd: any) {
         } else {
             Error(`${error(`执行失败`)}`);
         }
-    }
+    } else if (['native', 'rn'].includes(cmd.target)) {
-    else if (['native', 'rn'].includes(cmd.target)) {
         const prjDir = process.cwd();
         const cwd = resolve(prjDir, cmd.subDir || 'native');
-        copyFileSync(resolve(prjDir, 'package.json'), resolve(cwd, 'package.json'));
+        copyFileSync(
+            resolve(prjDir, 'package.json'),
+            resolve(cwd, 'package.json')
+        );
         // rn不支持注入NODE_ENVIRONMENT这样的环境变量，cross-env没有用
         /* const result = spawn.sync(
             'react-native',
@@ -127,7 +129,7 @@ export default async function build(cmd: any) {
                 `NODE_ENV=${cmd.mode}`,
                 'OAK_PLATFORM=native',
                 'react-native',
-                'start'
+                'start',
             ].filter(Boolean),
             {
                 cwd,
@@ -140,12 +142,9 @@ export default async function build(cmd: any) {
         } else {
             Error(`${error(`执行失败`)}`);
         }
-    }
+    } else {
-    else {
         Error(
-            `${error(
+            `${error(`target could only be web or mp(wechatMp) or rn(native)`)}`
-                `target could only be web or mp(wechatMp) or rn(native)`
-            )}`
         );
     }
 }