一、环境配置
1、下载并安装Node.js, Node.js官网
2、React Native的命令行工具(react-native-cli)
npm install -g react-native-cli
可能会出现权限问题EACCES: permission denied, 在上面命令行前加sudo, 回车后输入开机密码安装
3、开发工具
(1)安卓开发工具— — Android Studio
a、安装Android Studio, [地址]
b、管理SDK
c、配置全局环境
vi ~/.bashrc 后加入
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools
(2)IOS开发工具 — — XCode
(3)react native开发工具 — — Atom+ Nuclide插件
二、创建并运行项目
1、创建项目 react-native init XXXProject
2、运行项目
a、cd XXXProject进入项目根目录
b、安卓: 运行安卓虚拟机 / 连接上安卓真机并开启USB调试模式后敲入: react-native run-android
IOS: react-native run-ios 或者 双击项目目录下xxxProject / ios / xxxProject.xcodeproj,然后cmmd + r 编译项目
3、加载JS
运行项目成功后,手机/虚拟机会安装上该app,
IOS虚拟机的话cmmd + d 会出现加载新js等菜单
安卓真机的话,摇一摇 —> Dev Settings —> Debug server host &port for device, 输入调试用电脑的局域网IP和端口号(默认8081); 比如输入: 192.168.2.101:8081
三、可能碰到的问题
可能碰到问题:
一、在~/.bashrc下配置了android的sdk等工具关键路径了,但是在终端敲下比如在platform-tools中的adb时并没反应,
解决方案: 在terminal终端中敲入 source ~/.bashrc
二、明明连上手机了,但是安装不上,
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
解决方案:直接安装编译后的apk(需先用react-native run-android编译出apk)adb install android/app/build/outputs/apk/app-debug.apk
三、watchman环境问题
运行React-native 出现Error watching file for changes: EMFILE异常
1、卸载所有已安装的watchman:brew uninstall --force watchman
2、删除watchman相关文件:rm -rf /usr/local/var/run/watchman/
3、重新安装watchman:brew install watchman
四、brew安装后的node无法自动添加到关键路径导致npm无法正常使用(node -v npm -v均无法正常使用)解决方案:上node官网下载安装最新的稳定版本。。