如何在KMM项目中嵌入React Native版Rocket.Chat应用？

一、React Native嵌入KMM项目的可行方案 #

1. Android端集成 #

• 在KMM的Android模块build.gradle中配置React Native及Rocket.Chat RN的依赖仓库：

  repositories {
      mavenCentral()
      maven { url 'https://maven.google.com' }
      maven { url "$rootDir/../node_modules/react-native/android" }
      maven { url "$rootDir/../node_modules/jsc-android/dist" }
  }
  

• 引入Rocket.Chat RN SDK依赖，或直接将其代码作为子模块导入Android项目。
• 创建承载RN界面的ReactActivity/ReactFragment：

  class RocketChatChatActivity : ReactActivity() {
      override fun getMainComponentName(): String? {
          return "RocketChat" // 对应RN项目中注册的组件名
      }
  }
  

• 在KMM共享层定义expect接口，Android端实现该接口并启动上述Activity，完成跨端调用。

2. iOS端集成 #

• 在KMM的iOS模块Podfile中添加React Native及Rocket.Chat RN的依赖：

  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'RocketChatRN', :path => '../path-to-rocket-chat-rn' # 替换为实际路径
  

• 创建承载RN界面的UIViewController容器：

  import UIKit
  import React
  
  class RocketChatViewController: UIViewController {
      override func viewDidLoad() {
          super.viewDidLoad()
          let rootView = RCTRootView(
              bundleURL: URL(string: "http://localhost:8081/index.bundle?platform=ios")!,
              moduleName: "RocketChat",
              initialProperties: nil,
              launchOptions: nil
          )
          view = rootView
      }
  }
  

• 在KMM共享层定义接口，iOS端实现该接口并跳转至上述ViewController。

3. KMM共享层适配 #

• 在common模块定义跨端调用接口：

  expect class ChatService {
      fun startChat()
  }
  

• 分别在Android、iOS模块实现该expect类，封装各自启动RN聊天界面的逻辑，业务代码在共享层调用ChatService().startChat()即可触发界面跳转。

二、支持白标的Rocket.Chat启动方法 #

• 在RN版Rocket.Chat入口文件中，暴露接收原生参数的初始化方法：

  import { AppRegistry } from 'react-native';
  import App from './App';
  import { name as appName } from './app.json';
  
  const startRocketChat = (initialProps) => {
      AppRegistry.registerComponent(appName, () => () => <App {...initialProps} />);
  };
  
  global.startRocketChat = startRocketChat;
  

• Android端传递白标参数并启动：

  val whiteLabelProps = mapOf(
      "serverUrl" to "https://your-custom-server.com",
      "appLogo" to "your-logo-url",
      "primaryColor" to "#2563eb"
  )
  reactInstanceManager?.createReactContextInBackground()?.addReactContextEventListener { context ->
      context.catalystInstance.callFunction("RocketChat", "startRocketChat", listOf(whiteLabelProps))
  }
  

• iOS端传递白标参数：

  let whiteLabelProps: [String: Any] = [
      "serverUrl": "https://your-custom-server.com",
      "appLogo": "your-logo-url",
      "primaryColor": "#2563eb"
  ]
  let bridge = RCTBridge(delegate: self, launchOptions: nil)
  let rootView = RCTRootView(
      bridge: bridge!,
      moduleName: "RocketChat",
      initialProperties: whiteLabelProps
  )
  view = rootView
  

• 在Rocket.Chat RN的App组件中，根据传入的initialProps动态修改服务器地址、主题色、Logo等配置，实现白标效果。

内容的提问来源于stack exchange，提问作者IKnowNothingAboutFlutter