React Native搭建开发环境/link原生依赖问题
发布网友
发布时间：2024-10-18 11:56
共1个回答
热心网友
时间：2024-11-10 17:14
1. 官网下载安装Node（Node 的版本必须高于 8.3）
2. 官网下载安装Python2（版本必须为 2.x）
3. 官网下载安装JDK（版本必须是 1.8）
jdk配置（右键偶的电脑—属性—高级系统设置—环境变量）：
①. 创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录
②. 把platform-tools目录添加到环境变量Path中
③. 接下来配置JAVA_HOME(缺了这一步Android studio会显示找不到jdk安装目录，路径不包含bin文件)
④. 在系统变量里寻找 Path 变量，选择编辑，新建两个变量值%JAVA_HOME%\bin，%JAVA_HOME%\jre\bin
⑤. 新建环境变量，命名为CLASSPATH，变量值填入.;%Java_Home%\bin;%Java_Home%\lib\dt.jar;%Java_Home%\lib\tools.jar
⑥. 记得配置（官网无记录）：JRE_HOME C:\Program Files\Java\jre7（根据jdk安装位置更改路径）
jdk安装且环境配置完成，可在cmd中检查是否安装成功，命令：java -version
4. React Native命令行工具（react-native-cli）安装：npm install -g yarn react-native-cli
5. 安装Android Studio
二、 Android开发环境
1. 安装翻墙工具
2. 安装Android SDK
Android Studio默认会安装最新版本的Android SDK
①. 在 Android Studio 的欢迎界面中找到 SDK Manager（右下角选项）。点击Configure，然后就能看到SDK Manager。
②. 在 SDK Manager 中选择SDK Platforms选项卡，然后在右下角勾选Show Package Details。展开Android 9 (Pie)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）
③. 然后点击SDK Tools选项卡，同样勾中右下角的Show Package Details。展开Android SDK Build-Tools选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。 最后点击"Apply"来下载和安装这些组件。
3. 配置ANDROID_HOME环境变量
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（SDK 默认是安装目录：c:\Users\你的用户名\AppData\Local\Android\Sdk）
4. 把 platform-tools 目录添加到环境变量 Path 中
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去（此目录的默认路径为：c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools）。
注：添加目录路径要和之前path已有路径用分号分割
三、创建新项目
使用 React Native 命令行工具来创建一个名为"demo"的新项目：react-native init demo
创建指定RN版本项目：react-native init demo --verbose --version 0.44.0(版本号)
四、编译并运行React Native应用
进入项目cd demo 运行项目react-native run-android
link问题引入navigation相关配置文件注意链接原生依赖（react-native link）时的坑
1. 链接原生库react-native link后，注意android>app>src>main>java>com> MainApplication.java文件里面,有没有重复，如下：
你执行函数的命令因为重复执行link命令重复添加了，手动删除多余的即可；
还有settings.gradle也会出现多余的
2. android\settings.gradle文件中反斜杠更改：
错例：
3. 错误提示效果:app:compileDebugJavaWithJavac
解决：用android studio打开项目进行编译后再重新运行项目即可；
手动link配置
例：配置react-native-image-picker（一个集成相机和相册的功能的第三方库）示例：
react-native-image-picker使用
android 平台配置
这样Android环境就配置好了。
iOS平台配置
前端RN打包
在 Android Studio 中打包，即生成离线的 jsbundle 文件：
路径解析：
index.android.js：打包目标文件
android/app/src/main/assets/index.android.bundle：打包生成文件所在目录
app/src/main/res/：RN中用到的静态资源文件打包后生成文件所在目录
