React Native学习 --- 环境搭建

一、 React Native 环境需求

1.1 安装Homebrew

Homebrew是Mac中的一个包管理工具，没有安装的用户可以通过termnal安装,安装过的用户并且升级为最新版的可以直接跳至 1.2。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

已经安装过Homebrew的用户，通过下面命令将其升级为最新版，版本过低将会导致无法安装后续几个组件.

brew update

目前楼主使用的版本为：0.9.9

Homebrew版本

1.2 安装watchman

watchman是用于监听文件变化的工具，应该是用于监听文件变化，然后界面做出响应。执行如下命令

brew install watchman

1.3 安装flow

flow用于对代码进行类型检查，用于静态分析js语法错误的工具。执行如下的命令：

brew install flow

1.4 安装nvm

nvm 是 Node.js 的版本管理器，可以轻松安装并管理各个版本的 Node.js 。
注意:不建议用户使用Homebrew安装nvm，有可能会遇到很多坑，这是一部血泪史，不在此赘述,自我感觉RP好的可以尝试。

1.4.1 使用Homebrew安装（不建议）

通过 Homebrew 安装命令:

brew install nvm

将下列指令加入 .bash_profile(一般termnal会提示)

 NVM_DIR=~/.nvm

source $(brew --prefix nvm)/nvm.sh

重新载入 .bash_profile设定，使其生效

$ source .bash_profile

1.4.2 直接安装nvm

使用官网提供的直接安装方式

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash

然后按照终端提示：依次输入:

export NVM_DIR="/Users/CrabMan/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

Paste_Image.png

1.4.3 nvm安装node.js和npm

npm是用于node.js包依赖管理的工具，安装完node.js以后.
用下面命令查看有哪些版本可以安装

nvm ls-remote

一般采用设置并安装

nvm install node && nvm alias default node

二、安装React Native

首先 node 要在4.0以上，最好再更新一下 npm 的版本

npm i npm -g

注意：Mac 用户如果无法成功或者是非全局安装，可以使用全局安装，这时需要添加 sudo
提高命令的权限

sudo npm i npm -g   # 需要输入开机密码

因为天朝限制，把 npm 指向国内镜像，避免网络环境对安装过程造成的麻烦

$ npm config set registry https://registry.npm.taobao.org
$ npm config set disturl https://npm.taobao.org/dist

正式安装 react-native 命令行工具

$ npm i react-native-cli -g
# Mac 用户需要没有反应可以尝试 $ sudo npm i react-native-cli -g

三、初始化RN项目

这里的项目名必须以大写字母开头。否则会报错

react-native init CrabManRN

初始化项目时，因为天朝网速原因，可能会一直卡在（如果卡的时间较长，可以尝试重装，见文末）

Installing react-native package from npm...

耐心等待......网络上面查到的目前等待时间最久的时间为两天.

四、 iOS 开发环境准备

IOS 的开发环境相对来说比较简单了,只需要保证 Xcode 版本在 7.0 以上就行了，否则RN中的部分OC语法会不支持。cd到RN的项目路径下，使用终端build 并运行 iOS项目.

$ cd CrabManRN
$ react-native run-ios

运行iOS项目

一堆命令滚动完毕后会弹出新的终端窗口

等待中...

等待一段时间以后，终端显示完成100%

完成

期间模拟器会自动打开,继续等待完成至100%

模拟器效果图

五 Android 开发环境准备

5.1 安装Git

Mac上如果你已经安装了XCode，那么Git也就随之安装了，否则请使用homebrew进行安装：

brew install git

5.2 安装Android SDK(已安装的请跳过这一步)

首先下载安装最新版的JDK
然后使用Homebrew安装Android SDK:

$ brew install android-sdk

定义ANDROID_HOME环境变量

重要: 确保ANDROID_HOME
环境变量指向你已经安装的Android SDK目录:在你的~/.bashrc 或 ~/.bash_profile，而小数点开头的文件在Finder中是隐藏的，这两个文件有可能还没有被创建。请在终端下使用sudo vi ~/.bashrc
命令创建或编辑。如不熟悉vi操作，请点击这里学习
笔者是通过Homebrew安装SDK的，则加入下列路径

export ANDROID_HOME=/usr/local/opt/android-sdk

直接安装Android SDK的用户使用下面命令：

# 可能是（具体看Android studio中把SDK放在哪）：
export ANDROID_HOME=~/Library/Android/sdk

使用终端下载必要的sdk
选中以下项目：
Android SDK Build-tools version 23.0.1（这个必须版本严格匹配23.0.1）
Android 6.0 (API 23)
Local Maven repository for Support Libraries(之前叫做Android Support Repository)

下载列表01

下载列表02

笔者没有使用模拟器，直接真机调试，在运行之前需要将一个已经打开开发者模式，并且打开USB调试的安卓手机连接到电脑上，使用下面名列确认是否连接

adb list

确认自己手机已连接

在终端cd到项目路径下，运行安卓程序.

react-native run-android

就在刚刚，前天运行的好好的程序今天飘红了，我的内心是崩溃的,貌似是昨天我修改源文件造成的，现在我重新初始化一个RN项目，运行试试.

初始化成功

接下来尝试运行：

$   cd /Users/CrabMan/Desktop/CRAB_RN
$ react-native run-android

环境变量问题

修改环境变量并重新运行

运行成功

至此，reactNative的环境搭建，项目的初始化，以及iOS以及Android上分别运行成功。其实我知道，这一切才刚刚开始

六、管理React Native库的版本

在开发中，会经常的去控制React Native的版本库，得以适配各种条件下的开发，那该如何查看、控制ReactNative的版本呢？

6.1查看本地的React Native的版本

$ react-native --version

查看当前版本

6.2 更新本地的React Native的版本

npm update -g react-native-cli

6.3 查询react-native的npm包最新版本

NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
npm包地址：
https://www.npmjs.com/package/react-native
命令行查询
npm info react-native

6.4 升级或者降级npm包的版本

$ npm install --save react-native@0.18

6.5 更新项目templates文件（可选）

新的npm包会包含更新在运行react-native init命令生成的一些动态文件，例如init创建项目的时候会生成iOS和Android的子项目，我们可以通过以下的命令进行获取最新的代码
命令行查询

     $ react-native upgrade

七、WebStrom设置代码提示

8.1 从gitHub上下载xml插件

$ git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

8.2 安装

将ReactNative.xml文件复制~/Library/Preferences/WebStorm10/templates ，然后重启 WebStrom.如果路径下没有templates文件夹，可以手动创建一个。

4常见的问题及其解决办法

4.1.初始化项目时，长时间卡在Installing react-native package from npm...

当时遇到三次遇到这个问题的原因是使用Homebrew安装的nvm，但是去nvm官网发现，nvm不支持Homebrew,通过直接安装nvm解决该问题.
首先卸载Homebrew安装的nvm

brew uninstall nvm

保险起见，去brew的路径将所有nvm的文件删除.
nvm文件路径： /usr/local/lib
检查local路径下的文件，是否删除干净，然后重新安装.

4.2.直接安装nvm配置按照终端环境变量报错

-bash: /usr/local/opt/nvm/nvm.sh: No such file or directory
或者类似的问题，例如:
/usr/local/bin/npm: No such file or directory
等等
原因是nvm不在你的环境路径下面需要重新配置
打开你的_{/.bashrc（或者}/.zshrc，或者_{/.profile，或者}/.bash_profile）因此终端输入

open ~/.bash_profile

在打开的文件中输入

.~/.nvm/nvm.sh

输完代码以后的效果

在末尾添加如下命令

. ~/.nvm/nvm.sh

保存并退出，然后重启终端，输入nvm，完美解决

完美解决

4.3.运行Android遇到问题:application (项目名) has not been registered

真机效果图

这种问题在stackflow中找到了解决问题的办法,出现这种现象的解决办法有三种.

4.3.1.最为常见的原因

在运行现在的项目的时候，reactNative的服务依旧保持着上一个项目。解决办法很简单只需要在终端中结束所有进程，然后重新启动服务即可

$ ps aux | grep react
$ npm start 
#确保程序启动以后  control + c
$ react-native run-android

4.3.2 IDE影响

因为anroid studio或者是xcode的影响，完全退出所有的IDE，重启终端，然后重新运行项目，即可解决。

4.3.3.较为少见（很少有人会修改项目名）

根目录./index.ios.js中
AppRegistry.registerComponent('项目名',() => ...);
与./ios/项目名/appDelegate.m中的
RCTRootViewrootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"项目名" launchOptions:launchOptions];
或是./android/app/src/main/java/com/项目名/MainActivity.java*中的
mReactRootView.startReactApplication(mReactInstanceManager, "项目名", null);
项目名没有保持一致，修改为相同的即可。

4.4 Could not connect to development server

Screenshot_2016-08-28-18-29-37.png

原因屏幕中已经显示清楚了，一般按照屏幕的解决办法都可以解决。
说下ip地址的解决办法，首先在终端查看ip

$ ifconfig