利用 Create React Native App 快速建立 React Native 應用

利用 Create React Native App 快速建立 React Native 應用 從屬於筆者的 大前端開發相關，更多 React Native 相關資料參考 React Native-Reference。本文介紹的 Create-React-Native-App 是很是 Awesome 的工具，而其背後的 Expo 整個平臺也讓筆者感受很是的不錯。筆者目前公司是採用 APICloud 進行移動應用開發（人少 + 應用要求低），不過確實也有不少的性能瓶頸；今天筆者還特意郵件問了 Expo Support 有關添加微信、百度地圖等成爲官方預置庫的計劃，獲得的回覆是可能兩三個月內會先將微信集成進來，很期待將來 Expo 在國內的發展。

利用 Create React Native App 快速建立 React Native 應用

Create React Native App 是由 Facebook 與 Expo 聯合開發的用於快速建立 React Native 應用的工具，其深受咱們在前文介紹的 Create React App 的影響。 不少沒有移動端開發經驗的 Web 開發者在初次嘗試 React Native 應用開發時可能會困擾於大量的原生依賴與開發環境，特別對於 Android 開發者而言。而 Create React Native App 則可以讓用戶在未安裝 Xcode 或者 Android Studio 時，即便是在 Linux 或者 Windows 環境下也能開始 React Native 的開發與調試。這一點主要基於咱們能夠選擇將應用運行在 Expo 的客戶端應用內，該應用可以加載遠端的純粹的 JavaScript 代碼而不用進行任何的原生代碼編譯操做。咱們可使用 NPM 快速安裝命令行工具：

$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

命令行中會輸出以下界面，咱們能夠在 Expo 移動端應用中掃描二維碼，便可以開始遠程調試：

咱們也能夠選擇使用 Expo 的桌面端輔助開發工具 XDE ，其內置了命令行工具與發佈工具，同時支持使用內部模擬器：

除此以外，Expo 還提供了 Sketch 這個在線編輯器，提供了組件拖拽、內建的 ESLint 等功能，容許開發者直接在網頁中進行快速開發與共享，而後經過二維碼在應用內預覽。

Expo 支持標準的 React Native 組件，目前已經內置了相機、視頻、通信錄等等經常使用的系統 API，而且預置了 Airbnb react-native-maps、 Facebook authentication 等優秀的工具庫，將來也在逐步將經常使用的微信、百度地圖等依賴做爲預置歸入到 SDK 中。咱們也可使用 npm run eject 來將其恢復爲相似於 react-native init 建立的包含原生代碼的初始化項目，這樣咱們就可以自由地添加原生模塊。咱們也可使用 Expo 提供的 exp 命令行將項目編譯爲獨立可發佈的應用。咱們須要使用 npm install -g exp 安裝命令行工具，而後配置 exp.json 文件：

{
   name: "Playground",
   icon: "https://s3.amazonaws.com/exp-us-standard/rnplay/app-icon.png",
   version: "2.0.0",
   slug: "rnplay",
   sdkVersion: "8.0.0",
   ios: {
     bundleIdentifier: "org.rnplay.exp",
   },
   android: {
     package: "org.rnplay.exp",
   }
 }

配置完畢以後在應用目錄內使用 exp start 命令來啓動 Expo 打包工具，而後選擇使用 exp build:android 或者 exp build:ios 分別構建 Android 或者 iOS 獨立應用。