一,安装基本环境依赖
Node 的版本必须大于等于 10
Python 的版本必须为 2.x(不支持 3.x)
JDK 的版本必须是 1.8
javase记得配置环境变量
个人版本
$ node -v
v8.12.0
$ node -v
Python 3.7.1
$ java -version
java version "1.8.0_181"
二.安装Android studio
此文档只用到Android studio的adb
下载Android studio一路回车....
安装好之后配置sdk的环境变量
我的电脑 => 右键属性 => 高级系统设置 => 环境变量 => path => 新增 => 添加sdk路径
本人的sdk路径是
C:\Users\xxxx\AppData\Local\Android\Sdk\platform-tools
SDK授权:进入adb路径
C:\Users\xxx\AppData\Local\Android\Sdk\tools\bin
打开cmd 输入一下命令 一路Y加回车
sdkmanager --licenses

由于我已经授权过了所以显示的是已经授权过得页面
三.开始建立react native项目
1.安装Yarn和react-native-cli工具
npm install -g yarn react-native-cli

运气不错一步到位
2.初始化项目
react-native init test

安装完成

因为本人是vscode的深度用户所以我用vscode打开
安装相关依赖 react native tools等

四,启动项目
1.下载模拟器 随便下一个模拟器 本人用的是雷电模拟器(因为对比了其他的个人觉得雷电模拟器体验不错)

2.启动雷电模拟器

3.使用adb 连接设备
adb start-server

4.vscode启动项目
react-native run-android
启动时间会有点长,应该是连接手机下载依赖什么的

Five hundred years later 成功启动。。。。
四.调试项目
1.点击模拟器摇一摇功能

出现这么一坨

打开debug

查看电脑ip
打开cmd输入
ipconfig

在模拟器debug上输入ip+默认端口8081

退出再次摇一摇

选择两个其中一个 本人选择下面的不生效 所以选择了上面的
回去项目中修改App.js代码
<View>
<Text>Hello world!</Text>
</View>
VS CODE保存后可以看到模拟器会自动更新

从搭建,运行到调试react native 项目到此完毕
网友评论