React Native環境搭建

最近組裏老大開始招RN的一些開發人員，也從最近的一些動向代表未來的功能有可能會由RN來編寫了，而對於我是從事純Native的android開發工做已經N多年了，對於RN組裏面也有一些同事的技術分享，說實話對它是很是之抗拒的，覺着這玩意不會就像幾年前出的PhoneGap那樣雞肋的技術吧，也就是用Webview去加載h5頁面嘛，不可能代替Native的，直到最近組裏老大的招人動向發現本身才真的是井底之蛙，以爲這技術確定是有用的，因而乎花了週末兩天時間對其進行了一個初步瞭解，發現真的徹底出乎自已的預期，確實是特別值得一學的未來可能還能派上用場的一門技術，因此先將這兩天的研究成果記錄成案，將來會不斷去深刻學習它的。
初識React Native:

• 什麼是React Native?
  它是fackbook開源的一套用於開發移動端跨平臺App的技術框架；其代碼託管於GitHub【https://github.com/facebook/react-native】上，目前已有一千多名參與者向它貢獻代碼，以下：
  

   其中能夠看到它的star人數：
  

  是否是能感覺到它的瘋狂呢？而現在在用這門技術的公司都有哪些呢？看一下官網貼出來的【固然啦不必定百分百是真實的，但確定絕大部分確實是用了啦】以下：
  

  呃~~貌似就認得facebook，這技術是來自於它固然用過啦，來看看有木有國內的公司列在其中，固然有啦，以下：
  

  怎麼樣，有必要要學習它麼？另外對於這門技術跟我們Android native的性能有沒有很大的區別呢，不會就是用WebView來加載的H5吧，這個能夠在官方對該技術的開篇介紹就已經有說明了，以下：
  

  因此該技術仍是值得好好去探究滴~

• 爲何要用React Native?
  這裏從如下兩方面來進行闡述：
  ①、 傳統開發的痛點：
  　　a、開發成本高：Android和Ios兩個得兩個獨立的團隊進行開發。
        b、代碼複用率：Android和Ios的代碼徹底不能共享代碼。
        c、不一樣平臺實現會有差別：應該在實際中都遇到過Android實現的某個功能跟Ios不太同樣，因爲平臺的關係。
        b、沒法動態更新：雖然說Android現在都出現了一些熱修復與插件化的技術，可是仍是存在一些兼容性問題。
  ②、React Native的優勢：
        a、跨平臺：一次編寫就能夠適用Android和Ios。
        b、低投放高回報：如官網的標語所說：
             
  

        d、性能高：因爲它是用JS編寫最終會生成各個平臺的Native的代碼。
        e、支持動態更新：關於它能夠在將來的學習中來進行體會。

• 若是用了React Native，會有哪些好處？
        a、一才兩用：之前要兩我的來分別開發Android和Ios，如今一我的就能夠搞定兩個平臺了。貌似對於我這個只會Android的表示對錢途壓力山大。
        b、開發成本低：不用多說。
        c、代碼複用率高。
        d、支持動態更新：這個優點就不言而喻了。

MAC上環境搭建同時運行在Android和Ios手機上：

在Mac上開發React Native須要安裝如下環境和工具：

• Node.js
• React Native Command Line Tools
• XCode/AndroidStudio

因此下面直接開始安裝環境：

安裝Node.js:

在Mac上安裝Node.js可能經過Homebrew，具體命令以下：

brew install node

不夠我用這種方式在個人Mac上木有成功，因此改用了比較Low的辦法，直接上官網【https://nodejs.org/en/download/】下載.pkg安裝包進行安裝的，裝了一個稍老的版本，以下：

具體安裝步驟就很少說了，安裝完以後，能夠敲以下命令來驗證是否安裝好，以下：

安裝React Native命令行工具：

直接上命令：

npm install -g react-native-cli

而安裝時提示權限不足，以下：

固然是加sudo解決嘍，以下：

安裝成功以後，仍是執行相應的命令來驗證是否安裝成功，能夠經過以下命令：

 

安裝Xcode/AndroidStudio：

Xcode：

它是用來開發IOS的，不過我是搞Android的，不太會，可是不會照樣能夠經過React Native來運行一個app在ios手機上，具體安裝直接在mac上的appstore上進行搜索，以下：

它比較大，我是下了一夜才下完滴。

AndroidStudio：

這個直接略掉，太easy的，由於這是個人本職工做。。

建立第一個React Native應用：

工具都準備好以後，下面能夠經過以下命令進行React Native應用的初始化：

react-native init <項目名字>
如：
react-native init FirstApp

那下面來弄一下：

覺得它很順利，實際上這一步卡了半天，其坎坷過程也稍加記錄一下：

因而乎從新安裝了8.0的node.js，再次執行初始化，終於成功了，固然啦我這用文字是輕描淡寫了，實際解決過程耗費了我大半天。。以下：

也就是當看到上圖紅框處的提示就代碼React Native的項目正常被初始化了，接着看一下生成的項目目錄：

 

好，有了工程以後，那如何將它編譯運行到Android或Ios手機上呢？下面來實驗下：

運行工程至IOS：

根據初始化React Native項目在控制檯的提示就能夠看出有兩種方式來運行，以下：

To run your app on iOS:

   cd /Users/xiongwei/Documents/workspace/reactnativestudy/FirstApp

   react-native run-ios

   - or -

   Open ios/FirstApp.xcodeproj in Xcode

   Hit the Run button

首先用命令來運行，以下：

回車執行：

喲西，iphone的模擬器就出來啦，還挺刺激的，固然還有個東東：

最終安裝成功的畫面定格在：

好，接着用第二種方式，在xcode中進行安裝，以下：

先用xode來打開這個ios工程，對應的就是這個目錄存放的東東：

固然經過這個方式運行我也是卡了半天，緣由是因爲我以前徹底對ios不懂也沒運行過ios項目，因此xcode環境存在一些問題，這裏就不把這個坎坷之路記錄下來了，總之只要環境OK能正常運行ios項目那應該是挺順利就能夠裝上滴，打開以後：

也會彈出這個安裝框的：

最後就能夠正常的在手機上運行啦，比較簡單。

運行工程至Android:

也根據初始化React Native項目在控制檯的提示就能夠看出有兩種方式來運行，以下：

首先先用命令的方式來運行，以下：

因此這裏啓動一個模擬器，我日常習慣用Genymotion，以下：

再次執行剛纔的命令：

這樣就正常運行了。接下來採用直接運行Android工程來安裝，先找到React Native工程中的Android目錄，以下：

而後用Android Studio將其打開進行編譯，固然這個編譯也須要等待一段時間，編譯成功以後就能夠直接經過run的方式安裝啦，比較簡單就很少說了。

下面來論證一個問題：就是以前不是說React Native並非用Webview去加載H5的技術，其實它就是跟我們純Native開發的形式同樣，那何以見得呢？我們以Android平臺來例，能夠在運行完的界面上進行佈局分析，看是否佈局中就是我們Native寫的那些，下面來實驗下：

而我們搜一下"ReactTextView"的代碼：