React Native环境搭建及配置问题

简介: React Native环境搭建及配置问题

版本问题

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

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

$ yarn add react-native@0.59.10

对应的 react版本为16.8.3

$ yarn add react@16.8.3

参考: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

相关文章
|
6月前
create-react-app配置环境变量
create-react-app配置环境变量
153 0
|
2月前
|
前端开发
react配置proxy代理的两种方式
本文介绍了在React项目中配置代理的两种方式:通过在package.json中添加代理配置,以及通过创建setupProxy.js文件来实现更复杂的代理规则。
107 2
|
3月前
|
存储 监控 前端开发
|
4月前
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
276 0
|
6月前
|
前端开发 API
react如何进行项目配置代理
react如何进行项目配置代理
150 0
|
6月前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
410 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
6月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
119 2
|
6月前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
218 0
|
6月前
|
存储 资源调度 前端开发
【React | 完整项目创建流程】能看到这么详细的React配置流程,就偷着乐吧!
【React | 完整项目创建流程】能看到这么详细的React配置流程,就偷着乐吧!
211 1