React Native初體驗(yàn)

混合開發(fā)一直都比較想接觸的技術(shù)，所以這幾天就學(xué)習(xí)了下React Native的配置及JavaScript的基礎(chǔ)，體驗(yàn)一把混合開發(fā)的魅力。

一、React Native介紹

Learn once，Write anywhere

以下內(nèi)容來(lái)自：React Native - 入門介紹（起源、特點(diǎn)、與其它移動(dòng)技術(shù)的比較）

1、起源

（1）Native App 優(yōu)點(diǎn)是功能強(qiáng)大、性能優(yōu)越。但終究是受制于蘋果，而且多版本維護(hù)十分痛苦。

（2）為了不受蘋果掌控，F(xiàn)acebook 曾花費(fèi)大量的人力物力進(jìn)行移動(dòng) HTML5 技術(shù)研發(fā)。雖然有些成果，但始終離 Native App 有差距，而且這個(gè)差距可能永遠(yuǎn)趕不上。

（3）2012年9月，F(xiàn)acebook 方面承認(rèn)“Betting on HTML5 was a mistake.”。便放棄移動(dòng) HTML5，全力轉(zhuǎn)型 Native App 開發(fā)。

（4）在轉(zhuǎn)型 Native App 開發(fā)后，F(xiàn)acebook 內(nèi)部其實(shí)還在研發(fā)一種新的移動(dòng)技術(shù)，并開始使用這種技術(shù)開發(fā)內(nèi)部 App。這個(gè)技術(shù)便是 React Native。

（5）2015年3月，F(xiàn)acebook 正式公開發(fā)布 React Native，并將該技術(shù)開源。雖然當(dāng)時(shí)開發(fā)平臺(tái)僅支持 Mac OS，部署也僅支持 iOS 平臺(tái)。

（6）2015年9月15日，F(xiàn)acebook 發(fā)布了 React Native for Android，把 Web 和原生平臺(tái)的 JavaScript 開發(fā)技術(shù)擴(kuò)展到了 Google 的流行移動(dòng)平臺(tái) Android 上。至此，React Native 實(shí)現(xiàn)了跨平臺(tái)的特性。

2、React、React.js、React Native三者的聯(lián)系

  • React 是基礎(chǔ)框架,提供了一套基礎(chǔ)設(shè)計(jì)實(shí)現(xiàn)理念。
  • React.js 是在 React 理念的指導(dǎo)下產(chǎn)生的專門用來(lái)開發(fā)網(wǎng)頁(yè)的 web 前端框架。與 React 同時(shí)出現(xiàn)和發(fā)展，React 的相關(guān)概念都在 React.js 文檔中。
  • React Native 是用來(lái)開發(fā)移動(dòng)端 app 的。只不過(guò)是用了 React.js 那套模式，而底層是對(duì) Native Code 的封裝及調(diào)用。

3、React Native與其它移動(dòng)技術(shù)的比較

在 React Native 出現(xiàn)前，我們通常會(huì)選擇這三種移動(dòng)技術(shù)（Native App、HTML5、Hybrid）之一進(jìn)行開發(fā)。

  • Native App：開發(fā)原生應(yīng)用自然性能最好，功能強(qiáng)大。但多平臺(tái)版本的開發(fā)、維護(hù)要花費(fèi)大量的人力物力。
  • HTML5：雖然有 Web 的優(yōu)勢(shì)，即靈活的布局能力、免發(fā)版的敏捷迭代潛力、優(yōu)秀的跨平臺(tái)特性。在新聞資訊等一些強(qiáng)排版、弱交互的展示類 App 上大展拳腳。但由于 WebView 在移動(dòng)設(shè)備上的性能制約，始終難成大器，這也是 Facebook 放棄其的原因。
  • Hybrid：以 Cordova（PhoneGap）為代表的 Hybrid 方式集 Native App 和 Web 優(yōu)點(diǎn)于一體，使二者相互補(bǔ)短。

而 React Native 思想與上面三者都不一樣。它的底層引擎是 JavaScript Core，但調(diào)用的是原生的組件而非 HTML5 組件。這樣運(yùn)行時(shí)可以做到與 Navive App 相媲美的性能體驗(yàn)，同時(shí)因?yàn)?JavaScript 代碼可以使用后端強(qiáng)大的 Web 方式管理，既可以做到高效開發(fā)，也可以實(shí)現(xiàn)快速部署和問(wèn)題熱修復(fù)。

4、React Native的優(yōu)點(diǎn)

（1）性能媲美原生應(yīng)用

由于 React Native 提供的組件是對(duì)原生 API 的暴露。雖然我們是用 js 寫的代碼，但實(shí)際上調(diào)用的是原生 API，原生的 UI 組件。體驗(yàn)上足以媲美原生應(yīng)用。

（2）開發(fā)效率高

相比于原生開發(fā)，js 學(xué)習(xí)成本低、語(yǔ)法靈活。允許讓 Web 開發(fā)者更多地基于現(xiàn)有經(jīng)驗(yàn)開發(fā) App。

（3）組件化開發(fā)

React 強(qiáng)調(diào)將應(yīng)用劃分成多個(gè)互不相關(guān)的組件，每個(gè)組件作為一個(gè)獨(dú)立的視圖。這種類似搭積木的開發(fā)方式使得代碼結(jié)構(gòu)清晰、通用性高、可移植性高。上一個(gè)項(xiàng)目的某些組件，可以很方便地拿來(lái)在下一個(gè)項(xiàng)目中使用。對(duì)于那些優(yōu)秀的第三方組件，也能很方便地集成到我們項(xiàng)目中來(lái)。

（4）節(jié)約開發(fā)成本

百分之90多界面可以通過(guò) React Native 開發(fā)，一份代碼同時(shí)可以適配 Android 和 iOS。并通過(guò)一些手段自動(dòng)匹配不同屏幕大小的手機(jī)，再也不需要自己去計(jì)算視圖的大小和位置。

（5）實(shí)時(shí)遠(yuǎn)程調(diào)試

React Native 的調(diào)試比 Cordova 不知道好到哪里去了。開啟了實(shí)時(shí)重載之后，代碼一改，app 就自動(dòng)更新成最新，對(duì)于 UI 的搭建簡(jiǎn)直是省了不少的編譯時(shí)間。同時(shí)可以打開 XCode 實(shí)時(shí)的看到所有的 log 信息。

（6）代碼熱部署

我們知道 AppStore 審核流程超級(jí)久。而由于 React Native 是用的 js 來(lái)寫的代碼，實(shí)時(shí)編譯的過(guò)程能讓我們實(shí)現(xiàn)應(yīng)用像網(wǎng)頁(yè)一樣做到熱更新，隨時(shí)發(fā)布。真正能夠做到上架審核一次，永久 0 審核更新。

（7）有效降低移動(dòng)應(yīng)用安裝包體積

對(duì)于普通復(fù)雜度的移動(dòng)應(yīng)用，使用 React Native 實(shí)現(xiàn)的安裝包會(huì)比原生代碼實(shí)現(xiàn)的安裝包大。而當(dāng)移動(dòng)應(yīng)用功能越復(fù)雜，React Native 安裝包體積相比原生代碼安裝包就越小。

比如當(dāng)原生代碼實(shí)現(xiàn)的安裝包大于 15MB 時(shí)，使用 React Native 改寫代碼后，安裝包就小于原生代碼實(shí)現(xiàn)的安裝包。

二、環(huán)境配置

基于macOS進(jìn)行配置。

1.安裝軟件

Homebrew

Mac系統(tǒng)的包管理器，用于安裝NodeJS和一些其他必需的工具軟件。

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

Node

brew install node

安裝完node后建議設(shè)置npm鏡像以加速后面的過(guò)程（或使用科學(xué)上網(wǎng)工具）。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

React Native命令行工具

React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。

npm install -g react-native-cli

Watchman

由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開發(fā)時(shí)的性能（packager可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新）。

brew install watchman

Flow

一個(gè) JavaScript 的靜態(tài)類型檢查器，建議安裝它，以方便找出代碼中可能存在的類型錯(cuò)誤

brew install flow

WebStorm
一款非常優(yōu)秀的Web開發(fā)工具，同樣支持React Native開發(fā)。
下載地址：https://www.jetbrains.com/webstorm/

Android及iOS開發(fā)必備

  • Android Studio
  • Genymotion
  • Xcode

2.測(cè)試安裝

react-native init FirstApp
cd FirstApp
react-native run-android
react-native run-ios

到此，就可以分別在Android和iOS平臺(tái)上運(yùn)行項(xiàng)目。自己在配置過(guò)程中，也出現(xiàn)了一些坑。如果配置過(guò)程中出現(xiàn)問(wèn)題，建議google查一下相關(guān)解決方案。

三、預(yù)備知識(shí)

準(zhǔn)備好這些，終于可以開始學(xué)習(xí)React Native。目前看React Native還很神秘，接下來(lái)繼續(xù)努力，揭開它神秘的面紗。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,909評(píng)論 25贊 709
  • 互聯(lián)網(wǎng)發(fā)展至今，經(jīng)歷了幾個(gè)劃時(shí)代的產(chǎn)物，2000年前后， 新浪、搜狐作為中國(guó)第一代互聯(lián)網(wǎng)的門戶席卷了中國(guó)大地；20...
    bigParis閱讀 433評(píng)論 0贊 1
  • （一）H5、React Native、Native應(yīng)用對(duì)比分析 文章來(lái)源：@王利華，vczerohttp://vc...
    時(shí)茶閱讀 11,192評(píng)論 2贊 22
  • 第一次接觸這個(gè)軟件，第一次想寫點(diǎn)東西，希望大家不要嫌棄。 關(guān)于理想 理想很豐滿，現(xiàn)實(shí)很骨干。我想，每個(gè)人都...
    大笑的悲觀主義者閱讀 834評(píng)論 0贊 0
  • 采訪、撰文 |巫小仙 編輯 |靖然、蔡娜 圖片 |來(lái)自網(wǎng)絡(luò) 咖啡館里一男和一女各自開著電腦上網(wǎng)，女人心里想：“此刻...
    心探索官方閱讀 320評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容