React Native环境搭建及配置问题

版本问题

RN从0.60开始，Android平台移植到了androidx。

如果不想用androidx，安装rn必须指定版本为0.59。

$ yarn add [email protected]

对应的 react版本为16.8.3

$ yarn add [email protected]

参考：https://github.com/react-native-community/discussions-and-proposals/issues/129

常见问题

问题1

Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.

已经添加了Network Security Config，但是还是报错。

这是因为adb连接电脑的端口不对。

修改端口

adb reverse tcp:8081 tcp:8081

参考：https://reactnative.cn/docs/running-on-device/#1-enable-app-transport-security

问题2

java.lang.UnsatisfiedLinkError: couldn’t find DSO to load: libhermes.so

出现场景

集成RN到已有项目，运行时出现。

E/AndroidRuntime: FATAL EXCEPTION: create_react_context
Process: com.ado.example, PID: 25851
java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes.so
at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:738)
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:591)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:529)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:484)
at com.facebook.hermes.reactexecutor.HermesExecutor.(HermesExecutor.java:20)
at com.facebook.hermes.reactexecutor.HermesExecutorFactory.create(HermesExecutorFactory.java:27)
at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:949)
at java.lang.Thread.run(Thread.java:818)

原因

这是因为在React Native 0.60之后，新增了Facebook自研的js引擎Hermes。没有在项目的build.gradle中配置Hermes的仓库，所以找不到so文件。使用RN创建新项目时，RN会自动为我们生成标准的build.gradle。

解决方式

修改android根目录的build.gradle

...
allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, 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")
        }
        google()
    }
}
...

修改app目录的build.gradle

//最外层加上
project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
]
def jscFlavor = 'org.webkit:android-jsc:+'
def enableHermes = project.ext.react.get("enableHermes", false);

android{
  	.....
}

dependencies{
  	.....
    //在这里添加依赖配置
    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

点击sync now,再次运行项目，就不会报错了。

参考：https://github.com/facebook/react-native/issues/25986