如何在Android原生项目中集成React Native？

网站运维2个月前发布未希

141 0

Android原生项目集成 React Native的方法

一、开发环境准备

安装Node.js和npm

步骤：从[Node.js官网](https://nodejs.org/)下载并安装最新版本。

验证安装：在命令行输入node -v和npm -v，确保正确显示版本号。

安装React Native CLI

npm install -g react-native-cli

创建React Native项目

npx react-native init MyProject

二、配置Android原生项目

添加React Native依赖

在你的Android项目的build.gradle文件中，添加以下依赖：

dependencies {
    implementation "com.facebook.react:react-native:+" // From node_modules
}

配置Maven仓库路径

在项目的build.gradle文件中的allprojects代码块中添加本地Maven仓库路径：

如何在Android原生项目中集成React Native？

allprojects {
    repositories {
        ...
        maven {
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

注意：如果你的node_modules目录在项目根目录下，则路径应为url "$rootDir/node_modules/react-native/android"。

解决依赖冲突（可选）

如果遇到类似Error:Conflict with dependency 'com.google.code.findbugs:jsr305'的错误，可以在build.gradle文件中添加以下配置：

configurations.all {
    resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

三、集成React Native组件

创建React Native模块

在你的项目中创建一个新目录（例如src/main/java/com/yourpackage/rnmodule），并在其中创建一个新的Java类（例如MyReactModule.java）：

package com.yourpackage.rnmodule;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class MyReactModule implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

注册模块

在主应用的MainApplication.java中注册新的React模块：

import com.yourpackage.rnmodule.MyReactModule; // 导入你的模块
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new MyReactModule() // 添加你的模块
            );
        }
    };
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
    }
}

3.修改AndroidManifest.xml

如何在Android原生项目中集成React Native？

确保在AndroidManifest.xml中声明了必要的权限和服务：

<uses-permission android:name="android.permission.INTERNET" />
<application>
    ...
    <activity android:name=".MainActivity">
        ...
    </activity>
    <service android:name="com.facebook.react.jstasks.HeadlessJsTaskService" />
</application>

四、运行与调试