feat: rn不能import表达式，改为运行npm前生成js文件 用于路由引用

.gitignore

@@ -18,4 +18,5 @@ robotMsg.json
 site/public/example/
 src/components/**/_example/*.md
 example/ios/Pods
-example/ios/build
+example/ios/build
+example/src/componentList.ts

example/package.json

@@ -6,11 +6,12 @@
     "postinstall": "cd ios && pod install",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "web": "craco start",
-    "build:web": "craco build",
+    "web": "npm run gen-router && craco start",
+    "build:web": "npm run gen-router && craco build",
     "lint": "eslint .",
-    "start": "react-native start",
-    "test": "jest"
+    "start": "npm run gen-router && react-native start",
+    "test": "jest",
+    "gen-router": "node ./scripts/gen-router.js"
   },
   "dependencies": {
     "@craco/craco": "^7.0.0",

example/scripts/gen-router.js

@@ -0,0 +1,29 @@
+// react native在import时路径不能使用字符串拼接形式，用脚本生成一份router配置
+const prettier = require('prettier');
+const fs = require('fs');
+const path = require('path');
+const prettierRc = require('../../.prettierrc.js');
+const componentConfig = require('../src/config.json');
+
+console.log('正在生成路由文件...');
+const keys = [];
+componentConfig.forEach((config) => {
+  config?.children?.forEach((child) => {
+    keys.push(child.key);
+  });
+});
+
+const code = `import { lazy, LazyExoticComponent } from 'react';
+
+const componentsMap: Record<string, LazyExoticComponent<() => JSX.Element>> = {
+  ${keys.map((key) => `${key}: lazy(() => import('@src/components/${key}/_example/index'))`)}
+}
+export default componentsMap
+`;
+const formattedCode = prettier.format(code, {
+  ...prettierRc,
+  parser: 'babel',
+});
+
+fs.writeFileSync(path.resolve(__dirname, '../src/componentList.ts'), formattedCode, { encoding: 'utf-8' });
+console.log('已生成路由文件👏🏻');

example/src/App.tsx

@@ -8,9 +8,10 @@ import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated
 import { ThemeProvider, useTheme } from '@src/theme';
 import { Text, ScrollView, View, Button } from '@src/components';
 import { SafeAreaProvider, initialWindowMetrics, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { lazy, useCallback, Suspense, useState, useEffect, useMemo } from 'react';
+import { useCallback, Suspense, useState, useEffect, useMemo } from 'react';
 import { ListItem } from './components/ListItem';
-import componentList from './component-list';
+import componentConfig from './config.json';
+import componentsMap from './componentList';
 
 const Drawer = createDrawerNavigator();
 const Stack = createStackNavigator();
@@ -24,7 +25,7 @@ function ExampleList() {
       <StatusBar />
       <ScrollView>
         <View className="flex1 bg" style={{ paddingBottom: bottom }}>
-          {componentList?.map?.((list, index) => {
+          {componentConfig?.map?.((list, index) => {
             const endIndex = (list?.children?.length ?? 0) - 1;
             return (
               <View className="mt16" key={list.title + index}>
@@ -123,7 +124,7 @@ function App(): JSX.Element {
 
   const linkingMap = useMemo(() => {
     const result: Record<string, string> = {};
-    componentList.forEach((component) => {
+    componentConfig.forEach((component) => {
       component?.children?.forEach((child) => {
         result[child.key] = child.key;
       });
@@ -166,9 +167,9 @@ function App(): JSX.Element {
                 }}
               >
                 <Stack.Screen options={{ headerShown: false }} name="Home" component={Home} />
-                {componentList?.map?.((list) => {
+                {componentConfig?.map?.((list) => {
                   return list?.children?.map((item) => {
-                    const LazyComponent = lazy(() => import(`@src/components/${item.key}/_example/index`));
+                    const LazyComponent = componentsMap[item.key];
                     function component(_props: any) {
                       return (
                         <ScrollView>

example/src/config.json

@@ -0,0 +1,35 @@
+[
+  {
+      "title": "基础组件",
+      "children": [
+          {
+              "title": "Base 基础容器",
+              "key": "Base"
+          },
+          {
+              "title": "Button 按钮",
+              "key": "Button"
+          }
+      ]
+  },
+  {
+      "title": "布局",
+      "children": []
+  },
+  {
+      "title": "导航",
+      "children": []
+  },
+  {
+      "title": "输入",
+      "children": []
+  },
+  {
+      "title": "数据展示",
+      "children": []
+  },
+  {
+      "title": "消息提醒",
+      "children": []
+  }
+]

site/web/site.config.js

@@ -1,4 +1,4 @@
-import baseConfig from '@example/component-list.ts';
+import baseConfig from '@example/config.json';
 
 const componentConfig = baseConfig.map((config) => {
   const result = {