這篇文章我們聊一聊react-native，它是一款開源的跨平臺移動應用開發框架，於2015年推出，寫這篇文章時版本已經更新到了0.61。它的目標是Learn once, write anywhere。
圖1
說的直白點就是它是用來開發手機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安裝會很容易，但是給我彈出下面的彈窗
圖2
然後我就去升級系統，等我升級完成後還是這樣，最後不得已就去官網下載了一個與系統匹配的xcode安裝包！
5）初始化項目 react-native init MyApp
圖3
我就在圖3這卡住了，怎麼辦，網上查，然後慢慢試網上找到的方法！
一開始我發現我的系統根本沒裝CocoaPods，所以就裝一下
<code>~ sudo gem install cocoapods
~ pod setup/<code>
再看一下源的位置
<code>~ gem sources -l/<code>
添加源
<code>~ gem sources -a https://gems.ruby-china.com//<code>
移除其他源
<code>~ gem sources --remove https://rubygems.org//<code>
好了，完成上面的步驟，我們再初始化一下項目。但是還是卡在在了這裡，真是無語！
冷靜一下，看一下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的安裝真的是相當麻煩，整整折騰了一天，還沒完全解決某些問題！所以建議大家在安裝的時候，一定要在非常好的網絡環境下進行，至少可以排除網絡問題！
喜歡我的文章就關注我吧，有問題可以發表評論，我們一起學習，共同成長！
閱讀更多 做前端的蝸牛 的文章
