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
Paste_Image.png

然后调出开发者菜单(摇晃手机)
-> dev Settings-> debug server host & port ...
把刚才查到的本机ip + 端口号填上 (我的是 192.168.1.255:8081)返回 并Reload 下

推荐阅读更多精彩内容