React Native從零到一搭建開發環境

React Native從零到一搭建開發環境

ReactNative環境搭建

• 安裝Homebrew
• 安裝rvm
• 安裝nvm
• 安裝node
• 安裝react-native-cli
• 安裝watchman

iOS

• 安裝xcode
• 安裝ruby
• 安裝cocoaPods

Android

• 安裝jdk
• 安裝 Android Studio

一、Xcode

直接在App Store下載便可

二、RVM

安裝命令：

$ curl -L https://get.rvm.io | bash -s stable

注意： 安裝RVM前須要你先安裝好Xcode環境

期間可能會問你sudo管理員密碼，以及自動經過homebrew安裝依賴包，等待一段時間後就能夠成功安裝好RVM

載入RVM環境（新開 Termal 就不用這麼作了，會自動從新載入的）

$ source ~/.rvm/scripts/rvm

檢查一下是否安裝正確

$ rvm -v

2.1 用RVM安裝Ruby環境

列出已知的ruby版本

$ rvm list known

能夠選擇現有的rvm版原本進行安裝（下面以ruby 2.3.3版本的安裝爲例）
$ rvm install 2.3.3

等待下載，編譯過程，完成之後，Ruby, Ruby Gems 就安裝好了

注意： 若是以前沒有安裝過Homebrew, 則上面的安裝命令 rvm install xxx 會自動幫忙安裝Homebrew

2.2Ruby版本設置

將該版本的Ruby設置爲系統默認版本

$ rvm 2.3.3 --default

這個時候你能夠測試是否正確

img

2.3替換源

Ruby的默認源使用的是cocoapods.org，國內訪問這個網址有時候會有問題，網上的一種解決方案是將遠替換成淘寶的，替換方式以下：

$ gem source -r https://rubygems.org/

$ gem source -a https://ruby.taobao.org

想驗證是否替換成功了，能夠執行：

$ gem sources -l

替換成功後的輸出結果：

　CURRENT SOURCES　　　　　　　　　　　　
　http://ruby.taobao.org/　 

到這裏就已經把Ruby環境安裝成功

三、cocoaPods

安裝命令：

$ sudo gem install -n /usr/local/bin cocoapods

當顯示下面的 gems installed 再進行下一步操做

img

當上一步安裝成功後，在終端中輸入以下命令：

$ pod setup

這個過程可能比較漫長，須要20+分鐘的時間，須要耐心的等待安裝完成，當出現Setup completed的時候說明pod已經安裝成功了，後面就可使用pod了

CocoaPods的使用

咱們輸入下面的命令來嘗試搜索一個三方庫試試可否搜索出結果：

$ pod search AFNetworking

當出現下面的結果表示咱們安裝的pod是能夠正常使用了

img

四、Homebrew

Homebrew是Mac OSX上的軟件包管理工具，能在Mac中方便的安裝軟件或者卸載軟件，至關於linux下的apt-get、yum神器；Homebre能夠在Mac上安裝一些OS X沒有的UNIX工具，Homebrew將這些工具通通安裝到了 /usr/local/Cellar 目錄中，並在 /usr/local/bin 中建立符號連接

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

卸載命令：
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"

當顯示 Installation successful 表示安裝成功

img

brew如何使用

• 安裝軟件，如：$ brew install oclint
• 卸載軟件，如：$ brew uninstall oclint
• 搜索軟件，如：$ brew search oclint
• 更新軟件，如：$ brew upgrade oclint
• 查看安裝列表， 如：$ brew list
• 更新Homebrew，如：$ brew update

五、nvm

目前主流的node版本管理工具備兩種，nvm和n，下面咱們就以nvm來管理個人node

5.1 安裝

安裝命令：

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

下載完成後nvm就被安裝在了~/.nvm下

5. 2設置環境變量

• 若是你也使用了zsh的話，就須要在~/.zshrc這個配置文件中配置
• 若是使用brew安裝的nvm，須要在 ~/.bashrc文件中修改
• 不然就找找看/.bash_profile或者/.profile中修改

打開 ~/.zshrc

$ open $HOME/ .zshrc

在最後一行加上下面兩行代碼

export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm 

這一步的做用是每次新打開一個bash，nvm都會被自動添加到環境變量中了

完成後輸入下面命令從新啓動一下配置

$ source ~/.zshrc

終端輸入nvm能夠看到以下信息，即表示nvm安裝成功：

$ nvm

img

六、node

這裏安裝nodejs咱們建議使用nvm來安裝和管理node版本

使用nvm ls-remote查看一下有哪些node版本能夠被安裝

$ nvm ls-remote

img

安裝node，如今咱們以8.9.4的版本號爲例，目前weex中使用的也是8.9.4版本

$ nvm install v8.9.4

經過nvm ls命令查看當前已安裝好的全部node版本，這裏我安裝了兩個node版本，一個6.5.0，一個8.9.4，這兩個版本號後面能夠任意切換使用

$ nvm ls

img

接下來咱們可使用nvm use <version>來切換node版本

$ nvm use v8.9.4

img

注意：這時若是你新打開一個bash，輸入nvm current會發現顯示爲null，這是由於使用nvm use命令只會在當前bash裏生效，從新打開一個bash你會發現$PATH的值已經不包含剛纔的node目錄了，要解決這個問題也很簡單，使用nvm alias default <version>命令來指定一個默認的node版本就好了，這裏我使用了v8.9.4做爲默認版本：

$ nvm alias default v8.9.4

img

到此，node環境就搭建完畢了

七、react-native-cli

全局安裝react-native 指令
安裝命令：

$ npm install -g yarn react-native-cli

八、Watchman

安裝命令：

$ brew install watchman

九、JDK

去JDK官網下載安裝便可

官方下載地址

img

十、android Studio

Android開發工具，直接網上下載便可

參考教程

建立項目

初始化建立一個項目並運行項目分兩步：

• 建立項目
• 運行項目

10.1 建立項目

React Native 建立項目很是簡單，咱們只須要輸入下面的命令便可建立一個React Native 項目

$ react-native init ReactNativeDemo

10.2 運行項目

運行項目也有兩種方式：

• $ react-native run-ios
• $ npm start

10.2.1 react-native run-ios

等項目建立完成後，咱們執行 cd ReactNativeDemo 進入到項目根目錄(有packjson文件的目錄即爲項目根目錄)，而後執行下面的命令便可開啓一個npm 服務並啓動模擬器運行iOS平臺項目

$ react-native run-ios

項目運行成功效果如圖：

img

10.2.2 npm start

固然，咱們也能夠先開啓一個npm服務，先執行$ cd ReactNativeDemo 進入項目根目錄，而後執行 $ npm start 命令來開啓一個npm 服務

npm 服務啓動成功以下圖：

img

服務啓動成功後，咱們打開Xcode工程，直接運行模擬器便可

img

運行成功效果圖：

img

福利時間

• 做者React Native開源項目OneM地址(按照企業開發標準搭建框架完成開發的)：https://github.com/guangqiang-liu/OneM：歡迎小夥伴們 star
• 做者簡書主頁：包含60多篇RN開發相關的技術文章http://www.jianshu.com/u/023338566ca5歡迎小夥伴們：多多關注，多多點贊
• 做者React Native QQ技術交流羣：620792950 歡迎小夥伴進羣交流學習
• 友情提示：在開發中有遇到RN相關的技術問題，歡迎小夥伴加入交流羣（620792950），在羣裏提問、互相交流學習。交流羣也按期更新最新的RN學習資料給你們，謝謝你們支持！