以下环境搭建以Mac系统为例,Windows大同小异。
环境搭建
1、安装Node
首先需要安装Node,Mac下可以使用Homebrew(安装Homebrew传送门)进行安装:
brew install node
可以给npm设置淘宝镜像,可以加速国内下载:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
2、安装watchman
watchman是Facebook的开源项目,用于监控、记录文件的改动情况。其安装与Node的安装类似,都是使用Homebrew进行安装:
brew install watchman
3、安装React Native命令行工具(react-native-cli)、yarn包管理工具
npm install -g react-native-cli
yarn是Facebook推出的包管理工具,可以加速node模块的下载,安装后即可使用yarn来替代npm命令。
npm install -g yarn
或者,也可以使用Homebrew来进行安装:
brew install yarn
4、安装JDK、Android Studio和Xcode
Android开发需要安装Java Development Kit、Android Studio。JDK的安装不赘述,需要注意的是Android Studio安装时需要选择以下几项:
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
而iOS的开发需要用到mac系统,在mac系统下的App Store中搜索下载Xcode即可。
项目初始化
终端进入目标目录,使用下列命令初始化React Native项目MyProject:
react-native init MyProject
该命令初始化一个最新版的React Native项目,但有时候我们需要初始化一个旧版本的React Native项目,这时可以使用rninit的工具:
① 安装rninit
npm install -g rninit
② 初始化指定版本的RN项目:
rninit init MyProject --source react-native@0.38.0
另外,可以使用npm查看React Native的所有版本:
npm view react-native versions -json
上述命令初始化一个名为MyProject的、版本为0.38.0的React Native项目。
Android手机调试
使用真机进行调试,需要手机在“开发者选项”中打开“USB调试”,连接电脑后使用命令查看手机是否连接成功:
adb devices
结果中有设备则连接成功,如
List of devices attached
48a4deb2 device
接下来,可以将应用安装到手机:
react-native run-android
这条命令会下载相关依赖包(可能时间稍长),然后编译项目得到安装包,并将安装包安装到手机中(手机可能会有提示窗口询问是否安装,选择“是”即可)。
iOS手机调试
本人没有iOS设备,所以使用虚拟机进行调试。
① 使用Xcode打开:项目路径/ios/项目名.xcodeproj
② 在Xcode中选择虚拟设备,点击运行便会打开对应的虚拟机,并安装项目应用。
注意事项
① 项目运行中会打开一个新的命令行窗口launchPackager,并处于运行状态,请勿关闭它!
② 如果调试的手机中已经安装了项目软件(不是首次运行),再次进行调试时并不需要重新编译:
首先,使用adb反向代理端口,将电脑的端口反向代理到测试机上:
adb -s 48a4deb2 reverse tcp:8081 tcp:8081 # -s后接手机id(通过adb devices查看) # 若电脑只连接了一个设备,可以省略-s参数
然后,执行以下命令运行launchPackager:
react-native start
③ 需要重新进行编译的情况:当项目中的android或ios目录下的文件发生改动、电脑分配的IP地址发生变化。
④ 只改动外部的JS代码可以在App中打开菜单,选择“Reload”项进行更新。
⑤ 在App的菜单中选择Remote JS Debugging便可以在电脑浏览器中查看控制台的输出内容。