React Native 入坑筆記

此文為 React Native 小菜比（筆者）的筆記性質文章，本文記錄了筆者在初入坑時記錄的一些筆者認為需要記錄的知識點以及搭建過程中親身遇到的一些坑與對應的有效解決方案。

看完本篇內容你會獲得：

React Native 的基本概念

針對 iOS macOS 的 React Native 搭建過程

搭建過程中遇到的問題與解決方案

成功的運行 React Native

React Native 簡介

React Native 最早亮相是在React.js 2015大會， GitHub 上面的開源框架描述是這樣的：

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

我的理解是 React Native 是一套基於 JavaScript 和 React 的框架，使用它可以寫出可原生呈現的 iOS 與 Android 應用。

它最吸引人的地方是：一次學習，隨處可用，即只要學習好這套框架便可以同時寫出其所支持不同平台的原生 App。

React Native 搭建

React Native 搭建有兩種方式：

不需要 Native Code

需要 Native Code

不需要 Native Code

步驟如下：

這樣腦殘式的搭建不需要任何配置與修改，意不意外，驚不驚喜，是不是根本不用學就會？

然後你可以執行下面的命令生成自己的第一個 React Native App：

執行完畢會在終端列印一個二維碼出來，然後你需要在你的 iOS 或者 Android 設備上安裝Expo並連接到與你計算機相同的無線網。使用 Exop App 掃描上面生成的二維碼來打開你剛剛創建的項目~

筆者這裡沒有嘗試這種不需要 Native Code 的快速搭建，這是看到官方文檔在 v0.45 中更新的快速入門裡找到的，感興趣的同學可以試試哈。

需要 Native Code

Watchman 是 Fackbook 用於監視文件系統變化的工具。強烈建議您安裝它以獲得更好的性能。

安裝Node之後會自帶npm，接下來用 npm 安裝 React Native CLI:

後面還需要安裝 Xcode，確保 Xcode 的版本 >= 8，且還需要 Command Line Tools。

前面做好環境搭建之後就可以愉快的創建一個新的 App 啦：

Note: 這一步就比較坑了，筆者這裡遇到了問題。

如果你之前安裝過 Node.js 和 npm 則很有可能也有報錯。筆者是報： ，解決方法是重裝 Node 與 npm，這裡有前人的 gist來參考。

如果按照上面的 gist 重裝 Node 與 npm 之後還是報一樣的錯誤，那麼請在重新安裝之後安裝Yarn再次嘗試。

重裝 Node 和 npm 可能會影響你的其他基於 Node 和 npm 的軟體使用，比如筆者這裡的博客是 Hexo 搭建，重裝了 Node 和 npm 之後需要執行 重新 install 之後方可正常使用……

上面創建 App 的步驟走完就基本沒什麼坑可踩了，後面就是運行指令哈：

之後不出意外就可以跑起來了。

寫在最後

React Native 筆者是非常看好它的。只因為一句：

Learn once, write anywhere

而且實際的根據文檔中的 API 寫了一些 Demo，跑起來感覺也是棒棒的。尤其是修改了代碼之後直接在模擬器內 就省去了重新編譯的時間這一點帶給開發者的體驗（其實對於 React Native 來說就是使用者，就是用戶體驗）更是棒棒噠。

我呢，不認為守舊是件好事！有變革，才有創新，才有進步，才有機會~

期待後續與 React Native 的更親密接觸……

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！