在虚拟机中搭建React-Native基本环境

Author Avatar
TraJoe.Wu 11月 22, 2017
  • 在其它设备中阅读本文章

不知是否是公司电脑系统古老的原因(Windows 7),在其上搭建React-Native环境并不顺利,安装时碰到了一些未知错误导致后续无法进行。无奈在github提issue同样求助无果后,遂决定尝试在虚拟机中搭建,系统采用了Windows 10,果不其然,安装和搭建很顺利,以下是详细步骤。

1.安装虚拟机并安装系统

虽然不敢断定公司电脑的Win 7系统安装报错就是系统缘故造成,不过可以的话最好还是使用最新版的Windows 10或其他Linux系统,虚拟机使用VMware

2.安装Node.jsYarn及其他必要的软件

3.使用npm全局安装create-react-native-app CLI工具

1
npm i -g create-react-native-app

4.创建并开始项目

  • 创建项目,如rn-awesome
1
create-react-native-app rn-awesome

创建项目会随即yarn安装依赖包,如果安装顺利,其后在项目中使用命令运行不会报错

  • 切换到项目下执行命令
1
yarn start

新版的React-Native支持与手机appExpo协同开发,执行命令后会生成一个链接为exp://xx.xx.xx.xx:19000的二维码,使用Expo扫描该二维码或在手机浏览器中输入对应链接打开app,项目会打包并实时预览在手机上(确保手机与电脑处于同一网络下)。Expo下载

5.虚拟机网络设置

由于项目是在虚拟机中运行,虚拟机所处的网段及ip不能在手机上直接访问,通过设置虚拟机网络并转发主机端口实现访问。

  • 确保手机与电脑处于同一网络,电脑ip:172.17.1.48,虚拟机ip:192.168.134.129,React-Native工作端口1900019001
  • VMware为例,打开菜单栏下编辑> 虚拟网络编辑器

  • 对话框中选择NAT模式的链接,并设置

  • 设置网关于端口转发

以上设置完成后,通过手机浏览器访问主机转发的url,如http://172.17.1.48:19000,若有响应,则转发成功,随后手机浏览器中访问exp:172.17.1.48:19000打开Expo查看预览效果(二维码就不要再扫了,因为二维码对应链接是虚拟机的ip,手机无法直接访问)