如何将React Native应用作为模块集成到现有Android应用并通过Intent唤起

以下为两种常见场景下的可运行实现方案：

场景1：RN应用为独立安装的APK，从原生App跳转 #

适用于RN代码单独打包成独立APK的场景：

• 首先获取RN应用的包名，取值为RN项目android/app/build.gradle文件中applicationId对应的配置值，示例值为com.demo.rndemo
• 在原生Android项目的按钮点击事件中添加跳转逻辑，Kotlin示例代码如下：

jumpRnAppBtn.setOnClickListener {
    // 替换为实际RN应用的包名
    val rnPackageName = "com.demo.rndemo"
    val launchIntent = packageManager.getLaunchIntentForPackage(rnPackageName)
    if (launchIntent != null) {
        // 可选：向RN应用传递参数
        launchIntent.putExtra("custom_data", "从原生App传递的测试数据")
        startActivity(launchIntent)
    } else {
        Toast.makeText(this, "未安装对应RN应用", Toast.LENGTH_SHORT).show()
    }
}

Java示例代码如下：

jumpRnAppBtn.setOnClickListener(v -> {
    String rnPackageName = "com.demo.rndemo";
    Intent launchIntent = getPackageManager().getLaunchIntentForPackage(rnPackageName);
    if (launchIntent != null) {
        launchIntent.putExtra("custom_data", "从原生App传递的测试数据");
        startActivity(launchIntent);
    } else {
        Toast.makeText(this, "未安装对应RN应用", Toast.LENGTH_SHORT).show();
    }
});

• 可选：RN侧TS代码接收传递的参数，代码示例如下：

import { NativeModules, Platform } from 'react-native';

if (Platform.OS === 'android') {
  // 从原生Intent中获取对应参数
  NativeModules.IntentModule?.getExtra('custom_data', (data: string) => {
    console.log('接收到原生参数：', data);
  });
}

场景2：RN模块集成到现有原生Android项目内部跳转 #

适用于将RN代码作为模块嵌入原有原生项目的场景：

• 先完成RN模块集成基础配置：将TS开发的RN代码打包产物放入原生项目assets目录，导入RN相关依赖库，确保编译正常
• 在原生项目中创建承载RN页面的Activity，示例代码如下：

class RnDemoActivity : ReactActivity() {
    // 替换为RN项目中AppRegistry.registerComponent注册的入口组件名
    override fun getMainComponentName(): String = "RnDemoApp"

    // 可选：将原生传递的参数传入RN侧
    override fun createReactActivityDelegate(): ReactActivityDelegate {
        return object : ReactActivityDelegate(this, mainComponentName) {
            override fun getLaunchOptions(): Bundle? {
                val bundle = Bundle()
                bundle.putString("custom_data", intent.getStringExtra("custom_data"))
                return bundle
            }
        }
    }
}

• 在AndroidManifest.xml中注册该Activity：

<activity
    android:name=".RnDemoActivity"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
    android:windowSoftInputMode="adjustResize" />

• 原生按钮点击跳转逻辑示例：

jumpRnPageBtn.setOnClickListener {
    val intent = Intent(this, RnDemoActivity::class.java)
    // 可选传参
    intent.putExtra("custom_data", "原生传递的测试数据")
    startActivity(intent)
}

• RN侧TS代码接收参数示例：

type AppProps = {
  custom_data?: string
}

const App = (props: AppProps) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>RN演示页面，收到原生参数：{props.custom_data}</Text>
    </View>
  )
}

// 注册入口组件，和上面Activity中返回的组件名保持一致
AppRegistry.registerComponent('RnDemoApp', () => App)

注意事项 #

• 场景1跳转前需确认设备已安装对应RN应用，否则会触发未安装兜底逻辑
• 集成场景需注意RN版本与原生项目compileSdk版本适配，避免编译冲突
• 跨端传递复杂参数时，建议先序列化为JSON字符串再传递，避免类型不兼容问题

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