搭建使用create-react-native-app 搭建app開發環境

create-react-native-app

文檔地址

react-nativenode

expo 官網react

expo 文檔android

兩種建立react-natvie-app的方法

  1. react-native init projectName
  2. create-react-native-app project app

環境配置比較:第一種方法要求的開發環境比較繁雜,須要 node / watchman / jdk / android sdk,android studio / xcode 等等。第二種能夠擺脫android studio 和 xcode ,只要在手機上安裝expo client就能夠開發, 固然你也能夠在android studio 和 xcode 查看項目效果ios

打包比較:第一種打包須要依懶android studio 和 xcode , 配置繁瑣。 第二種只須要 配置 app.json 而後運行 exp build:android 或 exp build:ios 就能夠打包了git

how to use create-react-native-app

npm install -g create-react-native-app

create-react-native-app appName

cd appName

npm start

在移動設備上查看你的項目,須要移動設備和電腦在同一網段內 github

運行npm start 後會出現npm

圖片描述

  1. a 在安卓模擬設備打開項目(此處須要本身手動打開安卓模擬器,而後項目纔會運行在模擬器上 ,此狀況出如今mac設備上)
  2. i 在ios模擬設備上打開項目(在mac上加入安卓有xode 此命令可直接啓動ios模擬器)
  3. s 要求輸入郵箱或者手機號 會收到含有url的郵件或者短信 ,經過url 能夠打開 expo client 查看你的項目 ,建議輸入手機號 格式 +8613888888888 ,此方式用於ios設備
  4. q 顯示二維碼 android 能夠經過expo client掃描二維碼 查看你的項目
  5. r 從新打包 R 從新打包並清除緩存
  6. d 切換開發模式

項目結構

圖片描述

  1. client 是後來加的,放js文件的地方
  2. 這裏沒有android 和 ios 文件夾 ,有別於上文提到的第一種建立項目的方法

打apk包

npm install -g exp 
exp login   (此處須要在expo官網註冊帳號,而後登陸)

配置app.json
{
   "expo": {
    "name": "Your App Name",
    "icon": "./path/to/your/app-icon.png",
    "version": "1.0.0",
    "slug": "your-app-slug", 
    "sdkVersion": "XX.0.0",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname"
    },
    "android": {
      "package": "com.yourcompany.yourappname"
    }
   }
 }
exp build:android

打包完成後 登陸expo官網 點擊頭像-點擊View IPA/APK builds 就能夠看到 點擊下載就能夠了json

相關文章
相關標籤/搜索