React Native环境搭建

一、环境配置

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官网下载安装最新的稳定版本。。