React Native學(xué)習(xí) --- 環(huán)境搭建

一、 React Native 環(huán)境需求

1.1 安裝Homebrew

Homebrew是Mac中的一個包管理工具，沒有安裝的用戶可以通過termnal安裝,安裝過的用戶并且升級為最新版的可以直接跳至 1.2辈赋。

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

已經(jīng)安裝過Homebrew的用戶，通過下面命令將其升級為最新版，版本過低將會導(dǎo)致無法安裝后續(xù)幾個組件.

brew update

目前樓主使用的版本為：0.9.9

Homebrew版本

1.2 安裝watchman

watchman是用于監(jiān)聽文件變化的工具俯萌，應(yīng)該是用于監(jiān)聽文件變化，然后界面做出響應(yīng)上枕。執(zhí)行如下命令

brew install watchman

1.3 安裝flow

flow用于對代碼進行類型檢查绳瘟，用于靜態(tài)分析js語法錯誤的工具。執(zhí)行如下的命令：

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設(shè)定嘲玫，使其生效

$ source .bash_profile

1.4.2 直接安裝nvm

使用官網(wǎng)提供的直接安裝方式

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

一般采用設(shè)置并安裝

nvm install node && nvm alias default node

二、安裝React Native

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

npm i npm -g

注意：Mac 用戶如果無法成功或者是非全局安裝抡诞，可以使用全局安裝穷蛹，這時需要添加 sudo
提高命令的權(quán)限

sudo npm i npm -g   # 需要輸入開機密碼

因為天朝限制，把 npm 指向國內(nèi)鏡像昼汗，避免網(wǎng)絡(luò)環(huán)境對安裝過程造成的麻煩

$ 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 用戶需要沒有反應(yīng)可以嘗試 $ sudo npm i react-native-cli -g

三肴熏、初始化RN項目

這里的項目名必須以大寫字母開頭。否則會報錯

react-native init CrabManRN

初始化項目時顷窒，因為天朝網(wǎng)速原因蛙吏，可能會一直卡在（如果卡的時間較長，可以嘗試重裝鞋吉，見文末）

Installing react-native package from npm...

耐心等待......網(wǎng)絡(luò)上面查到的目前等待時間最久的時間為兩天.

四鸦做、 iOS 開發(fā)環(huán)境準(zhǔn)備

IOS 的開發(fā)環(huán)境相對來說比較簡單了,只需要保證 Xcode 版本在 7.0 以上就行了，否則RN中的部分OC語法會不支持谓着。cd到RN的項目路徑下泼诱，使用終端build 并運行 iOS項目.

$ cd CrabManRN
$ react-native run-ios

運行iOS項目

一堆命令滾動完畢后會彈出新的終端窗口

等待中...

等待一段時間以后，終端顯示完成100%

完成

期間模擬器會自動打開,繼續(xù)等待完成至100%

模擬器效果圖

五 Android 開發(fā)環(huán)境準(zhǔn)備

5.1 安裝Git

Mac上如果你已經(jīng)安裝了XCode赊锚，那么Git也就隨之安裝了坷檩，否則請使用homebrew進行安裝：

brew install git

5.2 安裝Android SDK(已安裝的請?zhí)^這一步)

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

$ brew install android-sdk

定義ANDROID_HOME環(huán)境變量

重要: 確保ANDROID_HOME
環(huán)境變量指向你已經(jīng)安裝的Android SDK目錄:在你的~/.bashrc 或 ~/.bash_profile，而小數(shù)點開頭的文件在Finder中是隱藏的改抡，這兩個文件有可能還沒有被創(chuàng)建矢炼。請在終端下使用sudo vi ~/.bashrc
命令創(chuàng)建或編輯。如不熟悉vi操作阿纤，請點擊這里學(xué)習(xí)
筆者是通過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（這個必須版本嚴(yán)格匹配23.0.1）
Android 6.0 (API 23)
Local Maven repository for Support Libraries(之前叫做Android Support Repository)

下載列表01

下載列表02

筆者沒有使用模擬器，直接真機調(diào)試欠拾，在運行之前需要將一個已經(jīng)打開開發(fā)者模式胰锌，并且打開USB調(diào)試的安卓手機連接到電腦上，使用下面名列確認(rèn)是否連接

adb list

確認(rèn)自己手機已連接

在終端cd到項目路徑下藐窄，運行安卓程序.

react-native run-android

就在剛剛资昧，前天運行的好好的程序今天飄紅了，我的內(nèi)心是崩潰的,貌似是昨天我修改源文件造成的荆忍，現(xiàn)在我重新初始化一個RN項目格带，運行試試.

初始化成功

接下來嘗試運行：

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

環(huán)境變量問題

修改環(huán)境變量并重新運行

運行成功

至此，reactNative的環(huán)境搭建刹枉，項目的初始化叽唱，以及iOS以及Android上分別運行成功。其實我知道微宝，這一切才剛剛開始

六棺亭、管理React Native庫的版本

在開發(fā)中，會經(jīng)常的去控制React Native的版本庫蟋软，得以適配各種條件下的開發(fā)镶摘，那該如何查看嗽桩、控制ReactNative的版本呢？

6.1查看本地的React Native的版本

$ react-native --version

查看當(dāng)前版本

6.2 更新本地的React Native的版本

npm update -g react-native-cli

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

NPM的全稱是Node Package Manager 凄敢，是一個NodeJS包管理和分發(fā)工具碌冶，已經(jīng)成為了非官方的發(fā)布Node模塊（包）的標(biāo)準(zhǔn)。
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命令生成的一些動態(tài)文件贡未，例如init創(chuàng)建項目的時候會生成iOS和Android的子項目，我們可以通過以下的命令進行獲取最新的代碼
命令行查詢

     $ react-native upgrade

七蒙袍、WebStrom設(shè)置代碼提示

8.1 從gitHub上下載xml插件

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

8.2 安裝

將ReactNative.xml文件復(fù)制~/Library/Preferences/WebStorm10/templates 俊卤，然后重啟 WebStrom.如果路徑下沒有templates文件夾，可以手動創(chuàng)建一個害幅。

4常見的問題及其解決辦法

4.1.初始化項目時消恍，長時間卡在Installing react-native package from npm...

當(dāng)時遇到三次遇到這個問題的原因是使用Homebrew安裝的nvm，但是去nvm官網(wǎng)發(fā)現(xiàn)以现，nvm不支持Homebrew,通過直接安裝nvm解決該問題.
首先卸載Homebrew安裝的nvm

brew uninstall nvm

保險起見狠怨，去brew的路徑將所有nvm的文件刪除.
nvm文件路徑： /usr/local/lib
檢查local路徑下的文件，是否刪除干凈邑遏，然后重新安裝.

4.2.直接安裝nvm配置按照終端環(huán)境變量報錯

-bash: /usr/local/opt/nvm/nvm.sh: No such file or directory
或者類似的問題佣赖，例如:
/usr/local/bin/npm: No such file or directory
等等
原因是nvm不在你的環(huán)境路徑下面需要重新配置
打開你的_{/.bashrc（或者}/.zshrc，或者_{/.profile记盒，或者}/.bash_profile）因此終端輸入

open ~/.bash_profile

在打開的文件中輸入

.~/.nvm/nvm.sh

輸完代碼以后的效果

在末尾添加如下命令

. ~/.nvm/nvm.sh

保存并退出憎蛤，然后重啟終端，輸入nvm纪吮，完美解決

完美解決

4.3.運行Android遇到問題:application (項目名) has not been registered

真機效果圖

這種問題在stackflow中找到了解決問題的辦法,出現(xiàn)這種現(xiàn)象的解決辦法有三種.

4.3.1.最為常見的原因

在運行現(xiàn)在的項目的時候俩檬，reactNative的服務(wù)依舊保持著上一個項目。解決辦法很簡單只需要在終端中結(jié)束所有進程碾盟，然后重新啟動服務(wù)即可

$ 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

原因屏幕中已經(jīng)顯示清楚了，一般按照屏幕的解決辦法都可以解決骡尽。
說下ip地址的解決辦法遣妥，首先在終端查看ip

$ ifconfig