React Native环境搭建小结

本文详细介绍在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 @模拟器名字 命令行运行模拟器

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值