這篇文章我們聊一聊react-native，它是一款開源的跨平臺移動應用開發框架，於2015年推出，寫這篇文章時版本已經更新到了0.61。它的目標是Learn once, write anywhere。

說的直白點就是它是用來開發手機app的，並且前端用react框架寫一份程式碼就可以做出ios和android雙端APP。聽話音它應該有以下優點：

比傳統的h5頁面體驗好；效率高、節省人力，因為native端開發通常需要兩撥人（ios+android），現在只需要前端。

基於以上優點以及react-native的設計思路，現在市面出現了各種各樣類似於這樣的框架，比如weex、hippy等，很多大廠小廠都跟著入坑。

為什麼類react-native框架會火？

類react-native框架會火的原因肯定是因為大多數公司的戰略都放在了app上，而技術永遠是服務於業務。那為什麼公司的戰略重點會是app，而不是傳統的瀏覽器，我認為有以下幾個原因？

體驗好，native的體驗要比h5的體驗好很多；垂直度高，或者說專業，有賣東西的app，有點外賣的app，有娛樂的app等等，功能專一；實現的功能多，有很多功能native可以實現，h5卻做不了；受限，你廠的頁面在別人家的瀏覽器被訪問就需要受別人的約束，不在自己的“主場”就會受人管，甚至要交“過路費”，這也是為什麼很多大廠選擇自己做瀏覽器的原因。

如果做app，上面的問題都不是問題。

安裝react-native

警告⚠️：這玩意安裝異常困難！

首先，最好能保證網路狀況良好或者非常好，而且能夠“科學”上網。本文選擇搭建ios版本。搭建步驟如下：

1）安裝node和yarn，這個比較簡單無需多言；

2）安裝watchman，brew install watchman，這個工具主要為了監聽檔案的修改以及重新整理頁面；

3）全域性安裝react-native-cli，也比較簡單，問題不大；

4）安裝xcode，問題來了。本來以為appstore安裝會很容易，但是給我彈出下面的彈窗

然後我就去升級系統，等我升級完成後還是這樣，最後不得已就去官網下載了一個與系統匹配的xcode安裝包！

5）初始化專案 react-native init MyApp

我就在圖3這卡住了，怎麼辦，網上查，然後慢慢試網上找到的方法！

一開始我發現我的系統根本沒裝CocoaPods，所以就裝一下

~ sudo gem install cocoapods ~ pod setup

再看一下源的位置

~ gem sources -l

新增源

~ gem sources -a https://gems.ruby-china.com/

移除其他源

~ gem sources --remove https://rubygems.org/

好了，完成上面的步驟，我們再初始化一下專案。但是還是卡在在了這裡，真是無語！

冷靜一下，看一下react native官網，讓我們試一下清華大學的映象，

圖4

完成圖4中的步驟，最後一步是在工程中的podFile檔案加一行程式碼，乍一看初始化專案中沒有podFile，尋尋覓覓最後發現專案中ios目錄下有一個podFile檔案，將其開啟，內容如下：

圖5

雖然不了解CocoaPods，但是這個檔案的內容看起來很像前端npm包的依賴。這時想試一下在ios目錄下直接執行pod install，看看能不能成功，測試一下！

圖6

看起來是成功了！

這時再初始化專案，就執行成功了！

此時無論用react-native run-ios命令還是xcode都可以成功開啟模擬器！

真機除錯RN（失敗）

1）用資料線連上自己的手機

2）選擇build app的手機

圖7

點選一下build，xcode提示建立失敗！試了網上說的很多方法，都不行！最後沒轍，去RN的github倉庫issue中尋找有沒有人提出類似的問題！運氣好，還真讓我找到了，

圖8

圖9

圖9中一個大神給出了答案，用xcode開啟xcworkspace代替xcodeproj，但是我試了一下，還是不行！感覺和xcode的版本有關係，圖中版本是11.**，我的版本是10.**，問題可能在這裡，不過我沒有再跟下去了！

總結

在16年上半年，我做過一次RN專案，當時用的RN的版本是0.28，三年過去了，嚯，版本都已經0.61了！RN的安裝真的是相當麻煩，整整折騰了一天，還沒完全解決某些問題！所以建議大家在安裝的時候，一定要在非常好的網路環境下進行，至少可以排除網路問題！