[React-Native]React-Native for Android(一):開發環境搭建

前言

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工具,按照提示安裝。安裝完成后運行 javacjava --version查看是否安裝成功。
    • AndroidStudio安裝
      Android Developer官網下載AS最新版。需要通過科學上網工具。如果沒有科學上網工具,可以去Android dev tool 下載。
      下載完成后,需要進行ANDROID_HOME配置。如果你使用的是Mac原生的terminal,運行vi ~/.bash_profile 打開bash配置文件,在英文輸入法環境下按i進入編輯模式,輸入export ANDROID_HOME=~/Library/Android/sdkexport 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并安裝。此處應使用科學上網工具。

安裝第一個項目

通過以下命令安裝第一個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工具。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,538評論 3 417
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,761評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,207評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,419評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,959評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,678評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,978評論 2 374

推薦閱讀更多精彩內容