搭建使用create-react-native-app 搭建app開發(fā)環(huán)境

NoraXie 發(fā)布于2019-08-23 10:25 / 3434人閱讀

摘要：文檔地址官網(wǎng)文檔兩種創(chuàng)建的方法環(huán)境配置比較第一種方法要求的開發(fā)環(huán)境比較繁雜，需要等等。第二種可以擺脫和，只要在手機(jī)上安裝就可以開發(fā)當(dāng)然你也可以在和查看項(xiàng)目效果打包比較第一種打包需要依懶和配置繁瑣。

create-react-native-app 文檔地址

react-native

expo 官網(wǎng)

expo 文檔

兩種創(chuàng)建react-natvie-app的方法

react-native init projectName

create-react-native-app project app

環(huán)境配置比較：第一種方法要求的開發(fā)環(huán)境比較繁雜，需要 node / watchman / jdk / android sdk,android studio / xcode 等等。第二種可以擺脫android studio 和 xcode ，只要在手機(jī)上安裝expo client就可以開發(fā), 當(dāng)然你也可以在android studio 和 xcode 查看項(xiàng)目效果

打包比較:第一種打包需要依懶android studio 和 xcode , 配置繁瑣。第二種只需要配置 app.json 然后運(yùn)行 exp build:android 或 exp build:ios 就可以打包了

how to use create-react-native-app

npm install -g create-react-native-app

create-react-native-app appName

cd appName

npm start

在移動(dòng)設(shè)備上查看你的項(xiàng)目，需要移動(dòng)設(shè)備和電腦在同一網(wǎng)段內(nèi)

運(yùn)行npm start 后會(huì)出現(xiàn)

a 在安卓模擬設(shè)備打開項(xiàng)目（此處需要自己手動(dòng)打開安卓模擬器，然后項(xiàng)目才會(huì)運(yùn)行在模擬器上，此情況出現(xiàn)在mac設(shè)備上）

i 在ios模擬設(shè)備上打開項(xiàng)目（在mac上加入安卓有xode 此命令可直接啟動(dòng)ios模擬器）

s 要求輸入郵箱或者手機(jī)號(hào) 會(huì)收到含有url的郵件或者短信，通過(guò)url 可以打開 expo client 查看你的項(xiàng)目，建議輸入手機(jī)號(hào) 格式 +8613888888888 ，此方式用于ios設(shè)備

q 顯示二維碼 android 可以通過(guò)expo client掃描二維碼查看你的項(xiàng)目

r 重新打包 R 重新打包并清除緩存

d 切換開發(fā)模式

項(xiàng)目結(jié)構(gòu)

client 是后來(lái)加的,放js文件的地方

這里沒(méi)有android 和 ios 文件夾，有別于上文提到的第一種創(chuàng)建項(xiàng)目的方法

打apk包

npm install -g exp 
exp login   （此處需要在expo官網(wǎng)注冊(cè)賬號(hào)，然后登錄）

配置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官網(wǎng) 點(diǎn)擊頭像-點(diǎn)擊View IPA/APK builds 就可以看到點(diǎn)擊下載就可以了