如何从原生Android Activity跳转至React Native页面？

1. 确认React Native环境已集成到Android项目 #

确保你的Android项目已经完成React Native基础集成：

• 项目根目录和app模块的build.gradle已配置RN依赖
• MainApplication中已正确初始化ReactInstanceManager并注册MainReactPackage

2. 创建并注册React Native目标页面 #

在RN代码目录中编写目标页面组件，例如TargetScreen.js：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const TargetScreen = () => {
  return (
    <View style={styles.container}>
      <Text>这是React Native跳转目标页面</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default TargetScreen;

在index.js中注册该组件：

import { AppRegistry } from 'react-native';
import TargetScreen from './TargetScreen';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => TargetScreen);
// 或者单独注册组件用于原生调用
AppRegistry.registerComponent('TargetScreen', () => TargetScreen);

3. 原生端实现跳转逻辑 #

方法一：通过独立ReactActivity跳转（推荐） #

• 新建继承自ReactActivity的类RNPageActivity：

public class RNPageActivity extends ReactActivity {
    @Nullable
    @Override
    protected String getMainComponentName() {
        // 返回RN中注册的组件名称
        return "TargetScreen";
    }
}

• 在AndroidManifest.xml中注册该Activity：

<activity
    android:name=".RNPageActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    android:windowSoftInputMode="adjustResize" />

• 在原Activity的按钮点击事件中启动该Activity：

Button jumpBtn = findViewById(R.id.btn_jump_to_rn);
jumpBtn.setOnClickListener(v -> {
    startActivity(new Intent(CurrentActivity.this, RNPageActivity.class));
});

方法二：在当前Activity直接加载ReactRootView #

适合不需要单独Activity的场景，在当前Activity中添加以下逻辑：

private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    mReactRootView = new ReactRootView(this);
    mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setCurrentActivity(this)
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
    // 启动RN组件
    mReactRootView.startReactApplication(mReactInstanceManager, "TargetScreen", null);
    setContentView(mReactRootView);
}

// 传递生命周期方法给ReactInstanceManager
@Override
protected void onPause() {
    super.onPause();
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostPause(this);
    }
}

@Override
protected void onResume() {
    super.onResume();
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostResume(this, this);
    }
}

@Override
protected void onDestroy() {
    super.onDestroy();
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostDestroy(this);
    }
    if (mReactRootView != null) {
        mReactRootView.unmountReactApplication();
    }
}

按钮点击时直接触发上述逻辑（或切换当前Activity布局）。

4. 注意事项 #

• 开发模式下需启动Metro服务：npx react-native start
• 若使用React Navigation等路由库，可通过Intent传递参数，在RN端接收后跳转至指定子页面
• 确保AndroidManifest.xml添加网络权限（开发模式需下载JS Bundle）

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