@bm-fe/react-native-multi-bundle 1.0.0-beta.0 → 1.0.0-beta.10

package/INTEGRATION.md

@@ -55,113 +55,155 @@ npx react-native start
 
 ## Native 模块集成
 
-### Android
+### Android（自动链接，无需手动配置）
 
-#### 1. 复制 Native 模块文件
+#### 自动链接工作原理
 
-将以下文件从 `templates/native/android/` 复制到你的 Android 项目：
+安装包后，React Native CLI 会自动：
+1. 读取包中的 `react-native.config.js` 配置
+2. 将 `ModuleLoaderPackage` 添加到 `PackageList` 中
+3. 在构建时自动集成原生模块
+
+#### 验证自动链接
+
+安装包后，可以通过以下命令验证自动链接是否生效：
+
+```bash
+npx react-native config
+```
+
+在输出中应该能看到 `@bm-fe/react-native-multi-bundle` 的配置信息。
+
+#### 确保 assets 目录存在
+
+确保 `android/app/src/main/assets/` 目录存在，bundle 文件将放在这里：
+
+```bash
+mkdir -p android/app/src/main/assets/modules
+```
+
+#### 手动集成（可选，仅在自动链接不工作时使用）
+
+如果自动链接不工作（极少数情况），可以手动集成：
+
+<details>
+<summary>点击展开手动集成步骤</summary>
+
+##### 1. 复制 Native 模块文件
+
+将以下文件从 `node_modules/@bm-fe/react-native-multi-bundle/templates/native/android/` 复制到你的 Android 项目：
 
 - `ModuleLoaderModule.kt` → `android/app/src/main/java/com/yourpackage/ModuleLoaderModule.kt`
 - `ModuleLoaderPackage.kt` → `android/app/src/main/java/com/yourpackage/ModuleLoaderPackage.kt`
 
 **重要**：修改文件中的包名 `com.yourpackage` 为你的实际包名。
 
-#### 2. 注册 ModuleLoaderPackage
+##### 2. 注册 ModuleLoaderPackage
 
-根据你使用的 React Native 架构版本，选择对应的方式：
-
-##### 方式一：新架构（React Native 0.82+，使用 ReactHost）
-
-如果你的 `MainApplication.kt` 使用 `ReactHost`（新架构），在 `PackageList` 中添加：
+在 `MainApplication.kt` 中添加：
 
 ```kotlin
-package com.yourpackage
-
-import android.app.Application
 import com.yourpackage.ModuleLoaderPackage
-import com.facebook.react.PackageList
-import com.facebook.react.ReactApplication
-import com.facebook.react.ReactHost
-import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
-import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 
 class MainApplication : Application(), ReactApplication {
   override val reactHost: ReactHost by lazy {
     getDefaultReactHost(
       context = applicationContext,
-      packageList =
-        PackageList(this).packages.apply {
-          // Packages that cannot be autolinked yet can be added manually here
-          add(ModuleLoaderPackage())
-        },
+      packageList = PackageList(this).packages.apply {
+        add(ModuleLoaderPackage())  // 手动添加
+      },
     )
   }
-
-  override fun onCreate() {
-    super.onCreate()
-    loadReactNative(this)
-  }
+  // ...
 }
 ```
 
-##### 方式二：旧架构（使用 ReactNativeHost）
+</details>
 
-如果你的 `MainApplication.kt` 使用 `ReactNativeHost`（旧架构），在 `getPackages()` 方法中添加：
+### iOS（自动链接，无需手动配置）
 
-```kotlin
-package com.yourpackage
+#### 自动链接工作原理
 
-import android.app.Application
-import com.yourpackage.ModuleLoaderPackage
-import com.facebook.react.ReactApplication
-import com.facebook.react.ReactPackage
-import com.facebook.react.PackageList
-import com.facebook.react.ReactNativeHost
-import com.facebook.react.defaults.DefaultReactNativeHost
+安装包后，React Native CLI 和 CocoaPods 会自动：
+1. 读取包中的 `react-native-multi-bundle.podspec`
+2. 将 `ModuleLoader` 原生模块添加到项目中
+3. 在构建时自动集成
 
-class MainApplication : Application(), ReactApplication {
-  override val reactNativeHost: ReactNativeHost =
-      object : DefaultReactNativeHost(this) {
-          override fun getPackages(): List<ReactPackage> =
-              PackageList(this).packages.apply {
-                // Packages that cannot be autolinked yet can be added manually here
-                add(ModuleLoaderPackage())
-              }
-
-          override fun getJSMainModuleName(): String = "index"
-          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-          // ... 其他配置
-      }
+#### 安装依赖
 
-  // ... 其他代码
-}
+安装 npm 包后，运行 pod install：
+
+```bash
+cd ios && pod install
+```
+
+#### 验证自动链接
+
+安装包后，可以通过以下命令验证自动链接是否生效：
+
+```bash
+npx react-native config
 ```
 
-**注意**：React Native 0.82+ 默认使用新架构（ReactHost），推荐使用方式一。
+在输出中应该能看到 `@bm-fe/react-native-multi-bundle` 的 iOS 配置信息。
+
+#### 准备 Bundles 目录
+
+确保 iOS 项目中有 `Bundles` 目录用于存放 bundle 文件：
+
+1. 在 Xcode 中，右键点击项目 → New Group，创建 `Bundles` 目录
+2. 或者在终端中创建：
+   ```bash
+   mkdir -p ios/YourProject/Bundles/modules
+   ```
+
+3. **重要**：确保 `Bundles` 目录已添加到 Xcode 项目的 Resources 中：
+   - 在 Xcode 中，右键点击 `Bundles` 目录 → Add Files to "YourProject"
+   - 确保 "Create folder references" 已选中（蓝色文件夹图标）
+   - 这样 bundle 文件才会被打包到 app 中
+
+#### Bundle 文件结构
 
-#### 3. 确保 assets 目录存在
+构建完成后，iOS bundle 文件应放置在：
 
-确保 `android/app/src/main/assets/` 目录存在，bundle 文件将放在这里。
+```
+ios/YourProject/Bundles/
+├── bundle-manifest.json
+├── main.jsbundle
+└── modules/
+    ├── home.jsbundle
+    ├── details.jsbundle
+    └── settings.jsbundle
+```
 
-### iOS
+#### 手动集成（可选，仅在自动链接不工作时使用）
 
-#### 1. 复制 Native 模块文件
+<details>
+<summary>点击展开手动集成步骤</summary>
 
-将以下文件从 `templates/native/ios/` 添加到你的 iOS 项目：
+##### 1. 复制 Native 模块文件
+
+将以下文件从 `node_modules/@bm-fe/react-native-multi-bundle/ios/ModuleLoader/` 复制到你的 iOS 项目：
 
 - `ModuleLoaderModule.h`
-- `ModuleLoaderModule.m`
+- `ModuleLoaderModule.mm`
 
 在 Xcode 中：
 1. 右键点击项目 → Add Files to "YourProject"
 2. 选择这两个文件
 3. 确保 "Copy items if needed" 已勾选
 
-#### 2. 注册模块
+##### 2. 验证编译
 
 iOS 端的模块会自动注册（通过 `RCT_EXPORT_MODULE`），无需额外配置。
 
-**注意**：iOS 端的 bundle 加载实现可能需要根据你的具体需求调整。当前模板提供了基础框架。
+重新构建项目：
+
+```bash
+npx react-native run-ios
+```
+
+</details>
 
 ## 初始化多 Bundle 系统
 
@@ -326,6 +368,53 @@ export const createHomeScreen = createModuleRouteLoader('home', 'Home');
 <Stack.Screen name="Home" getComponent={createHomeScreen} />
 ```
 
+**路由 Props 传递说明：**
+
+`createModuleRouteLoader` 会自动将 React Navigation 的路由 props 传递给模块组件，包括：
+
+- `navigation`：导航对象，用于页面跳转
+- `route`：路由对象，包含路由参数和配置
+
+模块组件可以直接使用这些 props：
+
+```typescript
+// 在模块组件中（如 HomeScreen.tsx）
+import React from 'react';
+import { View, Text } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
+
+const HomeScreen = ({ navigation, route }: Props) => {
+  // 可以使用 navigation 进行页面跳转
+  const handleNavigate = () => {
+    navigation.navigate('Details', { id: '123' });
+  };
+
+  // 可以使用 route.params 获取路由参数
+  const params = route.params;
+
+  return (
+    <View>
+      <Text>Home Screen</Text>
+      {/* ... */}
+    </View>
+  );
+};
+
+export default HomeScreen;
+```
+
+如果需要传递额外的 props，可以通过 React Navigation 的 `initialParams` 或 `getInitialProps`：
+
+```typescript
+<Stack.Screen 
+  name="Home" 
+  getComponent={createHomeScreen}
+  initialParams={{ customProp: 'value' }}
+/>
+```
+
 ### 方式二：使用路由注册系统
 
 ```typescript
@@ -364,6 +453,18 @@ const HomeScreen = getModuleRoute('home', 'Home');
 - 检查 `devServer` 配置是否正确
 - 验证 manifest URL 是否可访问
 
+### 5. 配置文件找不到
+
+如果执行打包命令时提示 `Config file not found`：
+
+- **确认配置文件位置**：`multi-bundle.config.json` 应该在项目根目录（与 `package.json` 同级）
+- **确认执行目录**：打包命令应该在项目根目录执行，或者通过 npm scripts 执行
+- **手动指定项目根目录**：如果仍有问题，可以通过环境变量指定：
+  ```bash
+  PROJECT_ROOT=/path/to/your/project node node_modules/@bm-fe/react-native-multi-bundle/scripts/build-multi-bundle.js ios
+  ```
+- **检查文件路径**：确认错误信息中的路径是否正确指向你的项目根目录
+
 ## 更多信息
 
 - [API 参考](./src/multi-bundle/README.md)

package/android/moduleloader/build.gradle

@@ -0,0 +1,93 @@
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+apply plugin: "org.jetbrains.kotlin.android"
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["ModuleLoader_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ModuleLoader_" + name]).toInteger()
+}
+
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+
+  // Namespace support was added in 7.3.0
+  return (major == 7 && minor >= 3) || major >= 8
+}
+
+android {
+  if (supportsNamespace()) {
+    namespace "com.bitmart.exchange.module.loader"
+
+    sourceSets {
+      main {
+        manifest.srcFile "src/main/AndroidManifestNew.xml"
+      }
+    }
+  }
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  kotlinOptions {
+    jvmTarget = "17"
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def isInDevelopment = project.hasProperty('ModuleLoader_development') && project.property('ModuleLoader_development') == "true"
+
+dependencies {
+  if (isInDevelopment) {
+    implementation("com.facebook.react:react-android:0.71.+")
+  } else {
+    // For < 0.71, this will be from the local maven repo
+    // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+    //noinspection GradleDynamicVersion
+    implementation "com.facebook.react:react-native:+"
+  }
+  
+  // Kotlin Coroutines
+  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
+  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3")
+}
+

package/android/moduleloader/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.bitmart.exchange.module.loader">
+</manifest>
+

package/android/moduleloader/src/main/AndroidManifestNew.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>
+