React Native环境搭建小结

最新推荐文章于 2022-02-14 15:43:54 发布

原创最新推荐文章于 2022-02-14 15:43:54 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍在Windows环境下搭建React Native开发环境的过程，包括Node.js、Android Studio的安装配置及解决常见问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所有配置都是在windows环境下

node

由于之前安装过node所以存在node版本升级问题在Linux下可以通过nvm控制Node版本 windows下只能重新安装
where node 查看所有node的安装位置
在官网下载最新的node安装包点击next进行安装安装完成后要将node的路径配置到环境变量中
node -v 查看安装的Node版本
这里写图片描述

Android studio

官网下载后一直next进行安装将sdk的路径配置到环境变量中
新建ANDROID_SDK_HOME 将sdk路径放进去
在Path中添加
;%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools;
在cmd中输入adb devices
这里写图片描述
会显示当前通过USB连接到电脑上的手机

React-Native

npm install -g react-native-cli  安装react-native-cli

react-native init Hello   初始化React-Native项目

进入项目目录react-native run-android 运行项目
此过程可能需要等稍微久一点时间

手机安装Hello apk文件如果遇到手机白屏
解决方案：手机设置—-更多应用—-找到刚安装的apk（名字就是初始化项目时的名字这里就是Hello）—–权限管理—-将显示悬浮框打开（默认是关闭的）
这里写图片描述
重新点击Hello apk运行摇晃手机

点击Reload 重新加载

如果手机出现红屏摇晃手机点击Dev Setting之后选择Debug serer host在弹出框中输入开启服务的ip和端口号（默认是8081）保存，回到程序页面再次打开悬浮窗点击reload即可成功运行程序。
这里写图片描述
重新运行Hello

恭喜你成功运行

如果出现以下情况
这里写图片描述
说明服务器没有启动进去项目下 react-native start即可再次运行

如果是在电脑上开启wifi手机接入可能会遇到下列问题
这里写图片描述
只需要将react-native start 更改成 react-native start --host ip地址 --port 端口号 即可重新运行

在Linux下可能需要用到的一些：
sudo rm -r 要删除的文件路径 (-r 与-rf的区别)
sudo tar zxvf ./jdk-8u121-linux-x64.tar.gz -C /usr/lib/jvm 解压文件到目标地址
sudo gedit /etc/profile 使用gedit打开文件
cp -r android-studio /opt 移动
sudo mkdir /usr/lib/jvm 创建目录
Ubuntu安装卸载jdk http://blog.youkuaiyun.com/l_serein/article/details/6036799
React Native环境搭建 http://www.linuxdiyf.com/linux/25545.html
http://m.blog.youkuaiyun.com/article/details?id=51052299
adb http://jingyan.baidu.com/article/2fb0ba405e815f00f2ec5f9e.html
http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E5%BA%94%E7%94%A8%E8%AE%BE%E5%A4%87%E8%BF%90%E8%A1%8Crunning%E4%BB%A5%E5%8F%8A%E8%B0%83%E8%AF%95debugging/
lsusb 可以查看usb的id
android list avd 查看所有avd信息
emulator @模拟器名字命令行运行模拟器