Android端ReactNative环境搭建——上

前言

最近一年，因为公司业务需要，部门引入了rn这门跨段技术来开发业务需求。从去年部门大佬调研rn这个框架到现在已有超过一年的时间了。而我从当时毕业不到1年的小白成长到现在负责维护项目的Android端代码的主力。同时，自己对rn相关的技术有了不少理解。因此，想要分享一些知识点，希望可以帮助到大家。我会以一个专栏的方式述说在这一年当中使用rn开发需求遇到的困难。大家可以借鉴参考下，共同进步！！！

使用rn开发功能的第一步当然是搭建相关的环境了。因为，笔者是开发android出生的。因此，这里只介绍下android端的环境如何搭建。

Android环境搭建

想要搭建一个开发环境，最官方的介绍自然是参考官方文档了。下面贴出官网地址，方便大家查看。
https://reactnative.cn/docs/environment-setup
官方文档显然是最权威的，但是笔者在看rn的官网是总觉得，它里面的步骤有些缺斤少两，就拿搭建环境这一章节来说，笔者一开始看的时候，看得十分迷惑，完全不知道每一步骤会发生什么问题，而且按照这些步骤下来其实是会报错了，又得要上网搜索各种解决方法。介于上述这几个原因，笔者就按照自己理解的思路来阐述环境搭建的步骤，若有相关错误的地方，还请大家以官方文档为主。

1. 搭建rn端的环境
   搭建rn端的环境，这十分的简单，我们使用一个命令即可。

npx react-native init AwesomeProject
//AwesomeProject是自己定的项目名称

我们在命令行终端中执行上面的命令，前提是电脑必须安装node，不然是会报错的。接着node便会帮助我们创建一个工程出来，如下图所示：

其中，node_module和yarn.lock这两个文件，我们完全不需要动它。我们通常更改package.json这个文件。这样，理论上我们的rn端环境已经是搭建好了，因为，node_module下面已经下载好了我们原生端需要引用到的rn代码。但是，这并不完整。因为，我们现在还无法将rn的代码打包到原生中去。这个我们先不急，下一篇博客我会仔细介绍如何将rn代码打包进原生中去。这次，我们最主要的任务是保证原生环境构建的时候gradle不会报错即可。

2. 原生环境搭建
   Android端原生环境搭建相对来说比较复杂，我们一步步来。
   首先，我们通过Android studio创建一个原生工程，创建好了之后，记得跑下工程，保证原生工程是可以正常运行的。接下来，我们要将原生的工程的文件夹名字改成android，并且将其放在我们上面创建的AwesomeProject文件夹下面。什么意思呢？大家看图就明白了。
   例如，我创建了一个原生工程，名叫test
   
   这个大家好理解吧。接着要将test文件夹改名为android文件夹，并且放到AwesomeProject目录下。
   
   通过上面两幅图片，想必大家已经很清楚我所表达的意思了。
   接下来的每一步大家都要仔细看下去，稍有不慎，那就是满屏的报错信息。
   我们打开，setting.gradle这个文件，做如下修改

rootProject.name = "android"//1.将名称更改为android，因为我们更改了跟文件夹名称，笔者在有些版本的android studio下面构建的时候会报错
//-----自定义部分start
include ':app'
//include ':library'
//-----自定义部分end

//2.添加下面这段代码，直接copy即可，所有的工程都一样的，不因项目变化而变化
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

接着，我们进入还是在同级目录下，找到build.gradle文件。

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        google()
        mavenCentral()
        jcenter()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.1.3"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        //-----rn依赖开始
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        //------rn依赖结束
        google()
        mavenCentral()
        jcenter() // Warning: this repository is going to shut down soon
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

因为，国内访问rn的依赖仓库耗时比较久，有可能会失败。因此，我们最好添加下阿里云的镜像。
最后，我们进入app模块下的build.gradle文件，做如下修改：

plugins {
    id 'com.android.application'
}

//-------设置是否使用hermers引擎 start
project.ext.react = [
        entryFile: "index.js",
        enableHermes: true,  // clean and rebuild if changing
]

def enableHermes = project.ext.react.get("enableHermes", true);
//-----设置是否使用hermers引擎 end----

android {
    compileSdkVersion 31
    buildToolsVersion "28.0.3"

    defaultConfig {
        applicationId "com.example.demo"
        minSdkVersion 21
        targetSdkVersion 31
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {

//-----自定义部分 start
    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.0'
    implementation 'androidx.lifecycle:lifecycle-runtime:2.5.1'
//   -----自定义部分 end

//添加下面的rn依赖----start 直接抄即可
  implementation "com.facebook.react:react-native:+"
// From node_modules
    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation "org.webkit:android-jsc:+"
    }
  //添加下面的rn依赖----end 直接抄即可  
}
//主要，这段代码一定要放在文件的最底端，而且不在任何必包里面哦！！！
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

因为，rn端的代码都是js代码，因此我们原生环境中需要添加相关的js运行环境，目前有两种js运行环境：hermes和jsc。这两者有什么区别呢？大家可以参考下面链接：https://reactnative.cn/docs/javascript-environment
反正，移动端的js引擎使用herms就对了。

完成上面这几步之后，我们在sync一下原生工程。正常情况下，能够构建成功不会报错。如果要错误，大家看下是否是下面列举的错误。

可能遇到的错误

1.如果确认了上述步骤没有遗漏的情况，sync之后会报错，看下报错信息是否于gradle版本有关。之前笔者遇到了一个rn问题是和gradle版本有关的。大家可以将gradle版本换成笔者demo使用的4.1.3版本的试下，看能不能成功构建，因为笔者的demo是可以构建成功的。
2.React Native on Android: Cannot run program “node”: error=2, No such file or directory
关掉android studio，然后使用下面命令重启androidstudio，接着sync一下原生工程：

open -a /Applications/Android\ Studio.app

具体参考下面链接：https://stackoverflow.com/questions/61922174/react-native-on-android-cannot-run-program-node-error-2-no-such-file-or-dir