为什么写这篇,网上的RN环境搭建教程很多,但是基本上都是copy来copy去,在搭建过程中还是有不少坑,虽然不是特别大的坑,但是对于初学者每个都要去谷歌找答案,很费时间。在此记录整个环境搭建过程,以及遇到的问题,俗称“坑”
安装流程
本次安装环境基于Windows10
,安装ReactNative
版本基于0.51
ps:访问困难的,请自备梯子
必须软件
1.Chocolatey
Chocolatey是一个Windows上的包管理器,类似于linux上的yum和 apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样:
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
win+x
打开菜单,选择“命令提示符(管理员)”,打开管理员dos窗口,复制以上命令,回车,等待安装完成。你可以输入choco -v
,正确输出版本号的话,安装正常
2.Python 2
打开命令提示符窗口,使用Chocolatey来安装Python 2.(注意目前不支持Python 3版本。)
choco install python2
命令窗口中输入以上命令,等待下载安装
3.Node
打开命令提示符窗口,使用Chocolatey来安装NodeJS。
choco install nodejs.install
命令行输入以上命令,等待下载安装
安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
命令行继续输入以上命令。如果无法识别npm命令,关闭dos窗口,重新打开新的dos窗口,输入以上命令,因为环境变量自动配置以后,旧的dos窗口无法识别
4.Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
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
命令行继续输入以上命令
5.Android Studio
没什么好说的,这个搞不定,也别整什么RN了。
需要注意的是:React Native目前需要Android Studio2.0或更高版本。JDK用1.8就好
配置下Android的环境变量,这里我遇到的问题是Android环境变量被自动移除了,不知道是不是因为安装以上软件的时候影响的,因为我之前设置过了Android环境变量,后面运行的报错,才发现adb命令都执行不了,所以重新检查设置下Android环境变量,至于怎么设置,自行搜索
至此,环境搭建初步完成
测试
连上手机
使用adb devices
查看手机是否连接正常
关闭掉管理员dos窗口,因为其定位目录为C:Windows\System32
目录,会有一些权限相关的设置,不方便我们在此目录测试,运行的时候会build faild
随便找个盘,新建一个workspace,打开dos窗口,这里你也可以用git bash
命令窗口,如果你安装了git的话。
初始化测试项目
react-native init AwesomeProject
进入项目目录
cd AwesomeProject
编译运行Android项目
react-native run-android
等待编译运行,运行到手机上后,如果出现红屏,并显示Unable to load script from assets index.android.bundle on windows
解决方法:打开项目目录,进入android/app/src/main
目录,新建一个assets
目录,然后在项目根目录中,命令行输入
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
完事再次输入运行命令,编译运行
react-native run-android
成功部署后显示:
再测试下更新,命令行启动RN服务
react-native start
在项目的根目录中,找到App.js,打开修改下,保存。然后在手机上按菜单键呼出弹窗(你也可以摇动手机呼出)选择第一项Reload
就会看到刚才做的修改
转载请指明出处RobinBlog:http://robinx.net/2018/01/19/ReactNative环境搭建/