react-native 0.40.0 环境搭建踩坑全记录

  • Z时代
  • 2024-01-10
  • 分类：综合

react

初学react-native，找了一个课程，使用0.40版本，而现在默认自动安装最新版本0.55，这给我添了不少麻烦，环境配置上也踩了好多坑，好不容易跑通，必须总结一下

1. 安装JDK 1.8（暂不支持更高版本），配置环境变量


win10系统，点击开始在菜单，直接打字：环境变量


点击新建

JAVA_HOME :  C:\Java\jdk1.8.0_171（你安装java的位置）


CLASSPATH :  .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;（注意前面有个‘.’）


Path 中添加 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;


这样java环境配置完成。

2. 安装android Studio，配置sdk和环境变量

单击configure，选择sdk manager


选择三个必选项，如下3个图片



记住sdk目录，用来配置环境变量


点击ok，Android会下载所需的SDK

配置环境变量

ANDROID_HOME ： C:\Users\ze258\AppData\Local\Android\Sdk

Path ：中添加两行，分别是

C:\Users\ze258\AppData\Local\Android\Sdk\tools

C:\Users\ze258\AppData\Local\Android\Sdk\platform-tools

配置好环境变量后，就可以在cmd中使用adb命令

3. 安装夜神模拟器，开启开发者选项

点击设置按钮，点击进入最下面的关于平板电脑

点击5次版本号，就可以开启开发者选项


返回上一级，进入开发者选项


开启USB 调试


打开cmd，输入

adb start-server 启动adb

adb devices 查看已经连接的模拟器


4. 安装node.js

5. 在cmd界面搭建react-native 环境

安装react-native-cli脚手架，和yarn工具

cmd中输入命令：npm install -g yarn react-native-cli

给yarn设置淘宝源

yarn config set registry https://registry.npm.taobao.org --global 

yarn config set disturl https://npm.taobao.org/dist --global 

6. 创建指定版本的react-native项目

因为我买的课程使用了0.40.0版本的react native，所以需要指定版本

cmd中输入命令： react-native init AwesomeProject --verbose --version 0.40.0 

进入项目： cd AwesomeProject

在android/app/src/main目录中创建assets文件夹

然后在根目录中执行如下命令

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

assets目录中会生成几个文件


7. 启动react-native项目

cmd中输入命令：react-native run-android

模拟器中会装载并启动项目，并弹出React Packager终端，点击模拟器右上角摇一摇，弹出app配置选项，选择dev setting


选择Debug server host & port for device选项

输入电脑IP:8081


IP可以在cmd中输入ipconfig后看到，端口跟React Package中提示的端口一致：8081

然后修改项目代码，检测模拟器是否可以加载，点击Enable Live Reload，开启热加载



以上是 react-native 0.40.0 环境搭建踩坑全记录 的全部内容， 来源链接： utcz.com/z/381951.html

回到顶部