RN幾種腳手架工具的使用和對比（react-native-cli、create-react-native-app、exp）

一塊乳酪發表於2018-04-28
ReactAPP

本文件將持續更新，歡迎指正

1、react-native-cli

無法使用exp服務

react-native init program-name  #初始化專案
npm start（react-native start） #在專案目錄下啟動 js service
react-native run-android #已連線真機或開啟模擬器前提下，啟動專案
react-native run-ios #已連線真機或開啟模擬器前提下(僅支援mac系統)，啟動專案
複製程式碼

2、create-react-native-app

create-react-native-app是React 社群孵化出來的一種無需構建配置就可以建立>RN App的一個開源專案,一個建立react native應用的腳手架工具(最好用，無需翻牆

初始化後專案可使用exp服務

安裝使用

npm install -g create-react-native-app #全域性安裝
複製程式碼

使用create-react-native-app來建立APP

create-react-native-app program-name #初始化專案
cd program-name #進入專案目錄
npm start #啟動專案服務
複製程式碼

create-react-native-app常用命令

npm start  #啟動本地開發伺服器，這樣一來你就可以通過Expo掃碼將APP執行起來了
npm run ios   #將APP執行在iOS裝置上，僅僅Mac系統支援，且需要安裝Xcode
npm run android  #將APP執行在Android裝置上，需要Android構建工具
npm test # 執行測試用例
複製程式碼

如果本地安裝了yarn管理工具，會提示使用yarn命令來啟動管理服務

RN幾種腳手架工具的使用和對比（react-native-cli、create-react-native-app、exp）

執行專案

用Expo App掃碼啟動專案服務螢幕上自動生成的二維碼，program-name就可以運 行在Expo App上

expo下載配置參考下一條

3、Expo

Expo是一組工具、庫和服務，可以通過編寫JavaScript來構建本地的ios和Android應用程式 需翻牆使用，下載資源速度慢

安裝使用

PC上通過命令列安裝expo服務

1、npm install exp --global #全域性安裝 簡寫： npm i -g exp
複製程式碼

手機上安裝Expo Client App（app store上叫Expo Client） 安裝包下載地址：expo官網 手機安裝好後註冊expo賬號（必須，後續用於PC expo 服務直接通過賬號將專案應用於expo app）

提示：為了確保Expo App能夠正常訪問到你的PC，你需要確保你的手機和PC處於同一網段內或者他們能夠聯通

初始化一個專案（Create your first project）

2、exp init my-new-project  #初始化專案,會要求你選擇模板
複製程式碼

The Blank project template includes the minimum dependencies to run and an empty root component 空白專案模板包含執行的最小依賴項和空白根元件

The Tab Navigation project template includes several example screens Tab Navigation專案模板包含幾個示例螢幕

RN幾種腳手架工具的使用和對比（react-native-cli、create-react-native-app、exp）

報錯：

Set EXPO_DEBUG=true in your env to view the stack trace. 報錯如下圖 解決方法：下載Expo XDE（PC客戶端使用） --初始化專案需翻牆

RN幾種腳手架工具的使用和對比（react-native-cli、create-react-native-app、exp）

注：使用命令列初始化專案可能會卡在下載react-native資源，可轉換成XDE初始化專案，再使用命令列啟動專案並推送

3、cd my-new-project #進入專案目錄
複製程式碼
4、exp start #啟動專案，推送至手機端
複製程式碼

啟動專案後會要求你輸入你在App上註冊的Expo賬號和密碼

RN幾種腳手架工具的使用和對比（react-native-cli、create-react-native-app、exp）

初始化後專案結構

主要windows下android目錄結構

|- program-name             | 專案工作空間
|- android              | android 端程式碼  
    |- app                  | app 模組
        |- build.gradle         | app 模組 Gradle 配置檔案
        |- progurad-rules.pro   | 混淆配置檔案
        |- src/main             | 原始碼
            |- AndroidManifest.xml  | APK 配置資訊 
            |- java                 | 原始碼
                |- 包名                 | java 原始碼
                    |- MainActivity.java    | 介面檔案, (載入ReactNative原始檔入口)
                    |- MainApplication.java | 應用級上下文, (ReactNative 外掛配置)
            |- res                  | APK 資原始檔
    |- gradle               | Gradle 版本配置資訊
    |- keystores            | APK 打包簽名檔案(如果正式開發需要自己定義修改簽名檔案)
    |- gradlew              | Gradle執行指令碼, 與 react-native run-android 有關
    |- gradlew.bat          | Gradle執行指令碼, 與 react-native run-android 有關
    |- gradle.properties    | Gradle 的配置檔案, 正常是 AndroidHome, NDK, JDK, 環境變數的配置
    |- build.gradle         | Gradle的全域性配置檔案, 主要是是配置編譯 Android 的 Gradle 外掛,及配置 Gradle倉庫
    |- settings.gradle      | Gradle模組配置
|- ios                  | iOS 端程式碼
|- node_modules         | 專案依賴庫
|- package.json         | node配置檔案, 主是要配置專案的依賴庫,
|- index.android.js     | Android 專案啟動入口
|- index.ios.js         | iOS 專案啟動入口
複製程式碼

package.json檔案說明

dependencies

  • 專案的依賴配置
    • 依賴配置,配置資訊配置方式
      • “version” 強制使用特定版本
      • “^version” 相容版本
      • “git…” 從 git版本控制地址獲取依賴版本庫
      • “path/path/path” 指定本地位置下的依賴庫
      • “latest” 使用最新版本
      • “>version” 會在 npm 庫中找最新的版本, 並且大於此版本
      • “>=version” 會在 npm 庫中找最新的版本, 並且大於等於此版本“

devDependencies

  • 開發版本的依賴庫

version

  • js 版本標誌

description

  • 專案描述, 主要使用於做第三方支援庫時,對庫的描述資訊

main

  • 專案的預設入口

engines

  • 配置引擎版本資訊, 如 node, npm 的版本依賴

**index.*.js 新版RN統一入口：index.js

  • 正常只作為專案入口,不做其他業務程式碼處理

注： 1、虛擬機器上很消耗電腦記憶體, 建議使用真機進行安裝測試

相關文章