老项目也能玩转跨平台？Android原生+RN混合开发深度解析

最新推荐文章于 2025-10-31 22:38:34 发布

原创

最新推荐文章于 2025-10-31 22:38:34 发布 · 966 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#android #react native

读者可通过本篇文章深入了解，在现有原生项目基础上，集成RN功能步骤及注意事项，推荐各位阅读。

一、环境准备

1. 创建 `package.json`（项目根目录）

{
   
   
  "name": "YourProject",
  "version": "1.0.0",
  "private": true,
  "scripts": {
   
   
    "start": "yarn react-native start",
    "bundle-android": "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/"
  },
  "dependencies": {
   
   
    "react": "17.0.2",
    "react-native": "0.66.5"
  }
}

关键点：

react 版本需与 RN 0.66.5 匹配（官方推荐 17.0.2）
添加 bundle-android 脚本用于生产环境打包 JS Bundle

2. 安装依赖

yarn install

二、Android 工程配置

1. 修改根目录 `build.gradle`

allprojects {
    repositories {
        google()
        mavenCentral()
        // 添加 React Native 本地仓库路径
        maven {
            url "$rootDir/node_modules/react-native/android"
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/node_modules/jsc-android/dist")
        }
    }
}

作用：让 Gradle 从本地 node_modules 目录加载 RN 依赖

2. 修改 App 模块 `build.gradle`

android {
    compileSdkVersion 30
    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 30
        ndk {
            abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
}

dependencies {
    implementation "com.facebook.react:react-native:0.66.5"  // 指定版本
    implementation "org.webkit:android-jsc:+"
    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"  // RN 依赖的兼容库
    
    // Fresco 版本需与 RN 0.66.5