前言
React-Native是互聯網巨頭之一的Facebook開發的一套多平臺開發解決方案。可以讓我們使用JavaScript和React開發移動端應用。倡導組件化開發理念,即在RN中任一個功能或者一個UI模塊都可以做為一個組件,我們可以使用其封裝好的組件,也可以通過嵌套形成新的組件。RN著重于讓開發者提高多平臺的開發效率,即Learn once,write everywhere的思想。
React-Native 經過Facebook將近三年的開發演進,在寫本文時最新的版本已經演進到0.52版本,在github上已經有0.53的pre release狀態。
React-Native的特點
- Learn once,Write everywhere
- 即只需要學習React-Native一種開發方式,就可以開發多個不同平臺的App,而且RN的大多數組件也是可以在不同的平臺復用的,可以大大的降低了開發成本。
- JSX和FlexBox布局
- Facebook 為了代碼的可讀性和效率,開發出了JSX語法糖,即可以在JavaScript中直接寫HTML標簽的語法糖。
- FlexBox可以很方便地用來改善動態或未知大小的元素的對齊,方向和順序等等。flex容器的主要特性是它可以調整其子元素的寬度或高度去填充可用的空白區,以最優的方式達到兼容不同屏幕大小。
- 接近原生應用的性能和體驗
React-Native的機制和PhoneGap和Ionic等機制完全不同,React-Native底層仍是使用原生平臺開發的,所以應用的整體體驗大大的高于Hybrid App。
React-Native for Android
最初的React-Native只支持iOS開發,直到2015年9月開始,React-Native同時開始支持Android開發。到現在RN已經支持大部分的安卓組件,并且在Android平臺已經很成熟了。
- React-Native for Android 開發環境搭建
主要講解一下在Mac下的環境配置。- HomeBrew安裝
Homebrew, Mac系統的包管理器,用于安裝NodeJS和一些其他必需的工具軟件。
運行命令:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
如果遇到EACCES: permission denied
問題,運行命令:sudo chown -R 此處填PC用戶名 /usr/local
查看用戶名命令:whoami
- Node.js安裝
建議去Node.js的官網下載LTS版本。有些文章可能會推薦通過HomeBrew安裝。但是這樣的缺點是brew下載的是latest version。為了穩定性考慮還是建議使用LTS版本。當然也可以安裝HomeBrew,再安裝homebrew-version,指定版本下載。下載安裝完成后運行node -v
查看一下是否安裝成功。 - yarn
Yarn是Facebook提供的替代npm的工具,可以加速node模塊的下載。
運行命令:npm install -g yarn react-native-cli
安裝yarn以及react-native cli工具
如果遇到EACCES: permission denied
問題,運行命令:sudo chown -R 此處填PC用戶名 /usr/local
- JDK安裝
去Oracle官網下載jdk工具,按照提示安裝。安裝完成后運行javac
和java --version
查看是否安裝成功。 - AndroidStudio安裝
去Android Developer官網下載AS最新版。需要通過科學上網工具。如果沒有科學上網工具,可以去Android dev tool 下載。
下載完成后,需要進行ANDROID_HOME配置。如果你使用的是Mac原生的terminal,運行vi ~/.bash_profile
打開bash配置文件,在英文輸入法環境下按i
進入編輯模式,輸入export ANDROID_HOME=~/Library/Android/sdk
和export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
,將Android sdk和adb工具配置入環境變量。按esc
退出編輯模式,再輸入:wq
進行保存退出。然后通過source ~/.bash_profile
使配置生效。如果使使用別的終端工具比如zsh,則要在~/.zshrc
下進行編輯。具體不同的終端可自行查詢資料。 - 安裝WatchMan
Watchman是由Facebook提供的監視文件系統變更的工具。安裝此工具可以提高開發時的性能(packager可以快速捕捉文件的變化從而實現實時刷新)。雖然此工具官方說是推薦
安裝,但是我還是推薦必須安裝。 - React Developer Tools
在開發中我們需要在Google Chrome中遠程調試React-Native JS代碼,在Google Chrome瀏覽器的應用商店中搜索React Developer Tools并安裝。此處應使用科學上網工具。
- HomeBrew安裝
安裝第一個項目
通過以下命令安裝第一個Demo項目:
react-native init Demo
cd Demo
react-native run-android
當然也可以通過--version
命令指定React-Native版本號:
react-native init Demo --version 0.39.2
注意必須精確到小數點后兩位。
修改項目
打開App.js并隨便改上幾行,按兩下R鍵打開開發者菜單,然后選擇 Reload JS 就可以看到你的最新修改。
在終端下運行adb logcat *:S ReactNative:V ReactNativeJS:V
可以看到應用的日志。
至此React-Native for Android 環境配置搭建完成,下一期我們將講解一下React-Native項目的開發IDE工具。