【深入學習ReactNative】React Native簡介和概述

2015年9月15日，Facebook釋出了 React Native for Android，把 Web 和原生平台的 JavaScript 開發技術擴充到了 Google 的流行移動平台。

什麼是React Native

React Native 讓開發者使用 JavaScript 和 React 編寫應用，利用相同的核心代碼就可以建立 Web，iOS 和 Android 平台的原生應用。React Native 的宗旨是，學習一次，高效編寫跨平台原生應用。

官方的github位址為：https://facebook.github.io/react-native/

React Native有什麼優點

1.提供了原生的控件支援

使用 React Native 你可以使用原生的控件，入在iOS平台我們可以使用UITabBar控件，在Android平台我們可以使用Drawer控件。這樣，就讓我們的App從使用上和視覺上擁有像原生App一樣的體驗。而且使用起來也非常簡單。

2.異步執行

所有的JavaScript邏輯與原生的代碼邏輯都是在異步中執行的。原生的代碼邏輯當然也可以添加自己的額外的線程。

這個特性意味着，我們可以将圖檔解碼過程的線程從主線程中抽離出來，在背景線程将其儲存在磁盤中，在不影響UI的情況下計算調整布局等等。

是以，這些讓React Native開發出來的App都是較為的流暢。

這個之間的通信過程也是有序列化來完成的，這個就讓我們可以使用Chrome Developer Tools 來完成JavaScript邏輯的調試，當然我們也能夠在模拟器和實體裝置上調試。

3.觸屏處理 

React Native實作了高性能的圖層點選與接觸處理。

4.Flexbox的布局樣式 

使布局将變得更簡單，這就使我們為什麼要将網頁的布局模式切換到React Native的Flexbox布局模式。Flexbox讓UI布局變得簡單，入使用margin和padding的嵌套模式。當然，React Native 同樣也支援網頁原生的一些屬性布局模式，如FontWeight之類的。這些聲明的布局和樣式，都會存在内聯的機制将其優化。

5.Polyfills機制 

React Native也支援我們使用第三方的JavaScript庫，來友善我們的開發。支援npm中的成千上萬的子產品。

6.基于React JS 

擁有React JS的優良特性。

跨平台架構這麼多？為什麼重點關注React Native？

如我們之前所介紹的，Android與IOS跨平台開發架構如此這多，如之前我們介紹的PhoneGap、Xamarin等，為什麼我們重點的關注React Native呢？

1. Facebook所開源的架構 

   我們知道，所有的開源架構，隻有是一線的大公司研發出來的才能夠保證架構的維護性、可用性。當然，這樣也會吸引更多的開發者使用這個架構，才能夠使我們在人才儲備上有人可用。并不是說，架構多好就能夠用的。如國内的CrossApp，雖然很好用，但是知名度不夠，造成我們研發、bug回報、人才招聘上的種種窘境。

2. React JS技術的革命 

   這個東西也就是國内的很多跨平台架構沒有關注的地方，Facebook使用了React JS已經有了好幾年的技術變革，特别是JSX與Virtual DOM的加入，給使用JavaScript來開發Native App簡直是一個質的飛躍。

3. BAT團隊已經投入研發與使用 

   如果很多中小型公司，看不清方向，這個我們倒是可以模仿BAT的腳步。現在的BAT公司内部，特别是A，已經投入了大量的人力在React Native上面，聽說TMall App已經開始使用React 進行重構。

我們可以看到，目前對于Facebook來說，他們的新業務線也将直接使用了React Native的開發模式 

搭建React Native 的 Windows 環境

NodeJs、Python、Android SDK、JDK

由于我們大天朝網絡的限制，很多依賴的庫都fetch不下來。是以整個React Native的環境搭建，指令執行都是一個痛苦的過程。（就連NodeJS我都快下了半天的時間）

我在Windows平台上搭建環境弄了差不多一周的時間，都沒有弄下來，特别是下面這個問題一直困擾着我

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">bash: ulimit: <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">open</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">files</span>: cannot modify limit: Too many <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">open</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">files</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
           

後面得到了高人的指點，借給我了一個梯子，并在我的Mac裝置上成功的運作了自己的第一個React Native項目。哭～～～

下面是我的運作步驟，大多數是和官方的介紹一樣的：

我們先從Github上擷取React Native的代碼

github位址：https://github.com/facebook/react-native

<code class="hljs php has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">git <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">clone</span> https:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//github.com/facebook/react-native.git</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
           

進入React Native 并使用npm 進行安裝

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">npm install <span class="hljs-attribute" style="box-sizing: border-box;">-g</span> react<span class="hljs-attribute" style="box-sizing: border-box;">-native</span><span class="hljs-attribute" style="box-sizing: border-box;">-cli</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
           

注意 

- 使用npm進行安裝，需要搭建好完整的nodejs環境，nodejs位址：https://nodejs.org 

- npm install 需要依賴于很多國外資源，自備翻牆梯子

建立自己的React Native項目，這裡命名為AwsomeProject

<code class="hljs java has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">react-<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">native</span> init AwsomeProject</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
           

運作完後，如果環境變量沒有配置錯誤，react 将會幫我們生成一個AwsomeProject的檔案夾目錄。

裡面内如如下所示： 

運作Android App

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>cd <span class="hljs-constant" style="box-sizing: border-box;">AwesomeProject</span>
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>react-native run-android</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
           

看起來很簡單的兩句指令，但是裡面隐藏這很多的陷阱。 

- 確定Gradle的環境配置好了，這裡還會動态的down很多Gradle的依賴檔案，不翻牆估計依賴檔案都下不下來 

- 需要安裝好自己的Python環境（怎麼安裝google吧），React Native 的 packager需要 python的支援 

- 這個東西，隻能運作在Android模拟器上，真機運作必須失敗，至于為什麼後面在介紹

注意好上面三點，就能在模拟器上看到如下畫面了 

運作iOS App

ios相對就簡單了很多，直接打開 ios/AwesomeProject.xcodeproj 檔案，使用Xcode編譯運作就能出現和Android類似的界面了。我的效果如下：

注意，同樣隻能夠在模拟器上運作

React Native的優勢和劣勢：（轉）：

React Native的優勢：

相對Hybird app或者Webapp：

• 不用Webview，徹底擺脫了Webview讓人不爽的互動和性能問題
• 有較強的擴充性，這是因為Native端提供的是基本控件，JS可以自由組合使用
• 可以直接使用Native原生的「牛逼」動畫（在FB Group這個app裡面，面闆滑出帶一點果凍彈動，面闆基于某個點展開這種動畫随處可見，這種動畫用Native code來做小菜一碟，但是用Web來做就難上加難）。

相對于Native app：

• 可以通過更新遠端JS，直接更新app，不過這快成為各家大型Native app的标配了…

劣勢：

• 擴充性仍然遠遠不如web，也遠遠不如直接寫Native code（這個不用廢話解釋了吧）
• 從Native到Web，要做很多概念轉換，勢必造成雙方都要妥協。最終web要用一套CSS的閹割版，Native要費勁地把這個閹割版轉換成native原生的表達方式（比如iOS的Constraint\origin\Center等屬性），兩邊都會不爽。

原文位址：http://blog.csdn.net/yzzst/article/details/48002187

 【關于我們】

才淇（微信公衆号：caiqicehua），專注于國内各大網際網路公司社會招聘内推。每天更新最新網際網路名企（包括但不限于今日頭條、網易遊戲、BAT、網易網際網路、小米、京東、樂視、攜程等名企）内推資訊，有技術崗、有産品崗、有營運崗、有設計崗、有互動崗、有銷售崗，更有其他N多相關崗位！更多内推資訊請掃描以下二維碼關注查閱。