能否在Android项目中添加React Native文件并通过原生代码执行？

你提到的通过WebView加载本地HTML/JS是Web前端的集成方式，而React Native是原生跨平台框架，需要走专门的集成流程，我给你详细梳理一下步骤：

1. 初始化React Native依赖 #

首先在你的Android项目根目录创建一个package.json文件，用来管理RN的依赖：

{
  "name": "MyRNIntegration",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.0"
  }
}

然后打开终端，在项目根目录运行npm install，确保你的电脑已经安装了Node.js环境。

2. 配置Android Gradle构建 #

• 在项目根目录的build.gradle中添加RN的Maven仓库：

allprojects {
    repositories {
        // 保留你原有的仓库（比如Google、jcenter等）
        maven {
            url "$rootDir/node_modules/react-native/android"
        }
        maven {
            url "$rootDir/node_modules/jsc-android/dist"
        }
    }
}

• 接着在app模块的build.gradle中添加RN的依赖：

dependencies {
    // 你的其他原生依赖...
    implementation "com.facebook.react:react-android:+"
    implementation "com.facebook.react:react-native:+"
    // 如果想用Hermes引擎代替JSC，加上这行
    implementation "com.facebook.react:hermes-android:+"
}

• 最后在AndroidManifest.xml中添加网络权限（开发阶段需要连接Metro服务器加载JS代码）：

<uses-permission android:name="android.permission.INTERNET" />

3. 编写React Native的JS组件 #

在项目根目录创建index.js，写一个最简单的RN测试组件：

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

const MyRNComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello from React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default MyRNComponent;

4. 在Android原生代码中加载RN组件 #

有两种常见方式：

方式一：新建一个独立的RN Activity #

创建RNHostActivity.java：

import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactActivityDelegate;

public class RNHostActivity extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        return "MyRNIntegration"; // 必须和package.json里的name一致
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new DefaultReactActivityDelegate(
                this,
                getMainComponentName(),
                DefaultNewArchitectureEntryPoint.getFabricEnabled() // 新架构可选，默认false
        );
    }
}

记得在AndroidManifest.xml中注册这个Activity。

方式二：在现有Activity中嵌入RN视图 #

如果不想新开页面，可以直接把RN视图加到原生布局里：

import android.os.Bundle;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.defaults.DefaultReactNativeHost;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = new DefaultReactNativeHost(this) {
            @Override
            public boolean getUseDeveloperSupport() {
                return BuildConfig.DEBUG; // 开发模式开启调试支持
            }

            @Override
            protected String getJSMainModuleName() {
                return "index"; // 对应我们的index.js文件
            }
        }.getReactInstanceManager();

        // 启动RN应用，组件名要和index.js的导出对应
        mReactRootView.startReactApplication(mReactInstanceManager, "MyRNIntegration", null);

        // 把RN视图添加到原生布局中
        LinearLayout rootLayout = new LinearLayout(this);
        rootLayout.addView(mReactRootView);
        setContentView(rootLayout);
    }

    // 必须重写这些生命周期方法，保证RN和原生生命周期同步
    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @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();
        }
    }
}

5. 运行项目 #

• 第一步：在项目根目录启动Metro打包服务器，运行npm start
• 第二步：正常编译运行你的Android项目，就能看到React Native的组件被加载出来了

额外提示 #

如果需要离线运行（不需要连接Metro服务器），可以执行npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/，把打包好的JS包放到assets目录，然后修改ReactInstanceManager的配置，让它加载本地包即可。

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