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

NoraXie 發布于2019-08-23 10:25 / 3440人閱讀

摘要：文檔地址官網文檔兩種創建的方法環境配置比較第一種方法要求的開發環境比較繁雜，需要等等。第二種可以擺脫和，只要在手機上安裝就可以開發當然你也可以在和查看項目效果打包比較第一種打包需要依懶和配置繁瑣。

create-react-native-app 文檔地址

react-native

expo 官網

expo 文檔

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

react-native init projectName

create-react-native-app project app

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

打包比較:第一種打包需要依懶android studio 和 xcode , 配置繁瑣。第二種只需要配置 app.json 然后運行 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

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

運行npm start 后會出現

a 在安卓模擬設備打開項目（此處需要自己手動打開安卓模擬器，然后項目才會運行在模擬器上，此情況出現在mac設備上）

i 在ios模擬設備上打開項目（在mac上加入安卓有xode 此命令可直接啟動ios模擬器）

s 要求輸入郵箱或者手機號會收到含有url的郵件或者短信，通過url 可以打開 expo client 查看你的項目，建議輸入手機號格式 +8613888888888 ，此方式用于ios設備

q 顯示二維碼 android 可以通過expo client掃描二維碼查看你的項目

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

d 切換開發模式

項目結構

client 是后來加的,放js文件的地方

這里沒有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 就可以看到點擊下載就可以了

GPU云服務器云服務器 java app開發環境搭建搭建開發環境開發環境搭建安卓開發環境搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96326.html

初次接觸ReactNative，搭建環境、調試時遇到的報錯們及解決方法

摘要：初次搭建總會碰上各種報錯以及紅黃屏報錯如果尚未搭建環境，請轉至官網搭建紅屏是程序無法正常運行，黃屏是程序可以運行但是可能存在一些潛在問題首次使用命令行工具來創建一個名為的新項目后運行后會報錯，如圖解決方法到你的已有項目中復制一份文件到初次搭建ReactNative總會碰上各種報錯以及紅黃屏報錯如果尚未搭建環境，請轉至官網搭建https://reactnative.cn/docs/g....

elliott_hu 2019-08-23 12:25 評論0 收藏0
從 1 到完美，用 js 和 react-native 寫一個 APP

摘要：從到完美，用和寫一個在年開源了后，緊接著在年就又開源了，就此打開了用和前端技術寫原生之路。對應來看，程序只有兩個部分，和，而部分則分為組件和。所以，在端的純庫無在中同樣適用，如等。應用實例便是使用開發的一個日記。從 1 到完美，用 js 和 react-native 寫一個 APP facebook 在 2013 年開源了 react 后，緊接著在 2015 年就又開源了 react...

CollinPeng 2019-08-23 11:45 評論0 收藏0
前端項目創建

摘要：原文地址創建項目方法一首先全局安裝使用命令行工具來創建一個名為的新項目提示你可以使用參數注意是兩個杠創建指定版本的項目。 1、利用dva-cli創建react項目 1，首先全局安裝dva-cli，大家可以自行選擇項目目錄。 $ npm install -g dva-cli 2，接著使用dva-cli創建我們的項目文件夾 $ dva new myapp 3，進入myapp目錄，安裝依...

Simon_Zhou 2019-08-23 11:37 評論0 收藏0
react-native 入門基礎介紹

摘要：一個簡單的，用于介紹相關基礎信息，主要是針對有興趣的同學參考以下內容及代碼在測試有效。本文不介紹安裝模擬器的開發方式，需要的請自行。路由組件使用組件使用入口首頁使用側滑路由組件，默認顯示路由為對象的第一個屬性值。 [toc] 一個簡單的demo，用于介紹react-native相關基礎信息，主要是針對有興趣的同學參考；以下內容及代碼在2018-08測試有效。完整項目代碼：https:/...

andycall 2019-08-23 12:21 評論0 收藏0