前言
React-Native是互聯(lián)網(wǎng)巨頭之一的Facebook開發(fā)的一套多平臺(tái)開發(fā)解決方案∫蚩椋可以讓我們使用JavaScript和React開發(fā)移動(dòng)端應(yīng)用。倡導(dǎo)組件化開發(fā)理念，即在RN中任一個(gè)功能或者一個(gè)UI模塊都可以做為一個(gè)組件翘地，我們可以使用其封裝好的組件，也可以通過嵌套形成新的組件癌幕。RN著重于讓開發(fā)者提高多平臺(tái)的開發(fā)效率衙耕，即Learn once,write everywhere的思想。
React-Native 經(jīng)過Facebook將近三年的開發(fā)演進(jìn)勺远，在寫本文時(shí)最新的版本已經(jīng)演進(jìn)到0.52版本橙喘，在github上已經(jīng)有0.53的pre release狀態(tài)。
React-Native的特點(diǎn)
- Learn once胶逢，Write everywhere
- 即只需要學(xué)習(xí)React-Native一種開發(fā)方式厅瞎，就可以開發(fā)多個(gè)不同平臺(tái)的App饰潜，而且RN的大多數(shù)組件也是可以在不同的平臺(tái)復(fù)用的，可以大大的降低了開發(fā)成本磁奖。
- JSX和FlexBox布局
- Facebook 為了代碼的可讀性和效率囊拜，開發(fā)出了JSX語法糖，即可以在JavaScript中直接寫HTML標(biāo)簽的語法糖比搭。
- FlexBox可以很方便地用來改善動(dòng)態(tài)或未知大小的元素的對(duì)齊冠跷，方向和順序等等。flex容器的主要特性是它可以調(diào)整其子元素的寬度或高度去填充可用的空白區(qū)身诺，以最優(yōu)的方式達(dá)到兼容不同屏幕大小蜜托。
- 接近原生應(yīng)用的性能和體驗(yàn)
React-Native的機(jī)制和PhoneGap和Ionic等機(jī)制完全不同，React-Native底層仍是使用原生平臺(tái)開發(fā)的霉赡，所以應(yīng)用的整體體驗(yàn)大大的高于Hybrid App菌仁。
React-Native for Android
最初的React-Native只支持iOS開發(fā)畔勤，直到2015年9月開始，React-Native同時(shí)開始支持Android開發(fā)。到現(xiàn)在RN已經(jīng)支持大部分的安卓組件近哟，并且在Android平臺(tái)已經(jīng)很成熟了。
- React-Native for Android 開發(fā)環(huán)境搭建
主要講解一下在Mac下的環(huán)境配置撩鹿。- HomeBrew安裝
Homebrew, Mac系統(tǒng)的包管理器搅方，用于安裝NodeJS和一些其他必需的工具軟件。
運(yùn)行命令：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
如果遇到EACCES: permission denied問題刺覆，運(yùn)行命令：sudo chown -R 此處填PC用戶名 /usr/local
查看用戶名命令：whoami - Node.js安裝
建議去Node.js的官網(wǎng)下載LTS版本严肪。有些文章可能會(huì)推薦通過HomeBrew安裝。但是這樣的缺點(diǎn)是brew下載的是latest version谦屑。為了穩(wěn)定性考慮還是建議使用LTS版本驳糯。當(dāng)然也可以安裝HomeBrew，再安裝homebrew-version氢橙，指定版本下載酝枢。下載安裝完成后運(yùn)行node -v查看一下是否安裝成功。 - yarn
Yarn是Facebook提供的替代npm的工具悍手，可以加速node模塊的下載隧枫。
運(yùn)行命令：npm install -g yarn react-native-cli安裝yarn以及react-native cli工具
如果遇到EACCES: permission denied問題，運(yùn)行命令：sudo chown -R 此處填PC用戶名 /usr/local - JDK安裝
去Oracle官網(wǎng)下載jdk工具谓苟，按照提示安裝官脓。安裝完成后運(yùn)行javac和java --version查看是否安裝成功。 - AndroidStudio安裝
去Android Developer官網(wǎng)下載AS最新版涝焙。需要通過科學(xué)上網(wǎng)工具卑笨。如果沒有科學(xué)上網(wǎng)工具，可以去Android dev tool 下載仑撞。
下載完成后赤兴，需要進(jìn)行ANDROID_HOME配置妖滔。如果你使用的是Mac原生的terminal，運(yùn)行vi ~/.bash_profile打開bash配置文件桶良，在英文輸入法環(huán)境下按i進(jìn)入編輯模式座舍，輸入export ANDROID_HOME=~/Library/Android/sdk和export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools，將Android sdk和adb工具配置入環(huán)境變量陨帆。按esc退出編輯模式曲秉，再輸入:wq進(jìn)行保存退出。然后通過source ~/.bash_profile使配置生效疲牵。如果使使用別的終端工具比如zsh承二，則要在~/.zshrc下進(jìn)行編輯。具體不同的終端可自行查詢資料纲爸。 - 安裝WatchMan
Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具亥鸠。安裝此工具可以提高開發(fā)時(shí)的性能（packager可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新）。雖然此工具官方說是推薦安裝识啦，但是我還是推薦必須安裝负蚊。 - React Developer Tools
在開發(fā)中我們需要在Google Chrome中遠(yuǎn)程調(diào)試React-Native JS代碼，在Google Chrome瀏覽器的應(yīng)用商店中搜索React Developer Tools并安裝颓哮。此處應(yīng)使用科學(xué)上網(wǎng)工具家妆。
- HomeBrew安裝
安裝第一個(gè)項(xiàng)目
通過以下命令安裝第一個(gè)Demo項(xiàng)目：
react-native init Demo
cd Demo
react-native run-android
當(dāng)然也可以通過--version命令指定React-Native版本號(hào)：
react-native init Demo --version 0.39.2
注意必須精確到小數(shù)點(diǎn)后兩位。
修改項(xiàng)目
打開App.js并隨便改上幾行,按兩下R鍵打開開發(fā)者菜單题翻，然后選擇 Reload JS 就可以看到你的最新修改揩徊。
在終端下運(yùn)行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到應(yīng)用的日志腰鬼。
至此React-Native for Android 環(huán)境配置搭建完成嵌赠，下一期我們將講解一下React-Native項(xiàng)目的開發(fā)IDE工具。
