Ionic是Angular移動(dòng)應(yīng)用程序開發(fā)最流行的框架?，F(xiàn)在，Ionic宣布推出React beta和Vue Js。這篇文章是關(guān)于Ionic React with Capacitor（Ionic Product）的開始。電容器是Cross-Platform的原生新娘，用于構(gòu)建通用應(yīng)用程序。這篇博文將解釋如何使用Ionic移動(dòng)組件設(shè)置react項(xiàng)目并生成iOS，Android和桌面（Electron框架構(gòu)建）應(yīng)用程序。
創(chuàng)建Ionic React項(xiàng)目
執(zhí)行此命令以創(chuàng)建基于反應(yīng)的離子項(xiàng)目。
$
npx
create-react-app
react-ionic-app
--typescript
$
cd
react-ionic-app
安裝Ionic和React路由依賴。
$
npm
install @ ionic / react
$
npm
install react-router
$
npm
install react-router-dom
$
npm
install @ types / react-router
$
npm
install @ types / react-router-dom
App.js
現(xiàn)在用CSS導(dǎo)入Ionic組件包。清除現(xiàn)有的App.css代碼。
import ' @ ionic / core / css / core.css ' ;
import ' @ ionic / core / css / ionic.bundle.css ' ;
從 ' @ ionic / react ' 導(dǎo)入 { IonApp } ;
從 ' react ' 導(dǎo)入 React ， { Component } ;
class App 擴(kuò)展 Component {
render （） {
回來 （
< IonApp >
） ;
}
}
出口 默認(rèn) App ;
運(yùn)行項(xiàng)目
使用以下命令執(zhí)行項(xiàng)目。我建議使用
紗線
，這適用于
React
。項(xiàng)目在
3000
港口運(yùn)行。
npm
run
start
或
yarn
start
編譯成功！
您現(xiàn)在可以在瀏覽器中查看
react-ionic-app
。
本地：
http：// localhost：3000 /
在您的網(wǎng)絡(luò)上：http：//192.168.0.17
：3000 /
構(gòu)建項(xiàng)目
在項(xiàng)目
src
目錄下
創(chuàng)建
頁面
，
組件
和
服務(wù)
文件夾。
使用電容器 - 構(gòu)建移動(dòng)應(yīng)用程序
您需要使用以下插件將Web項(xiàng)目轉(zhuǎn)換為移動(dòng)應(yīng)用程序。
npm install --save @ capacitor / core @ capacitor / cli
構(gòu)建Web項(xiàng)目
您必須構(gòu)建用于創(chuàng)建移動(dòng)應(yīng)用程序的Web項(xiàng)目。
npm
run build
或
yarn
build
初始化電容
命令
npx cap init
創(chuàng)建配置文件。修改webDir來
構(gòu)建
，而不是
www
react-ionic-app $ npx cap init
？應(yīng)用名稱
YourAppName
？應(yīng)用程序包ID（采用Java包格式，無破折號(hào)）
com.reactionic.com
？你想使用哪個(gè)npm客戶端？
紗線
?
在2.57ms內(nèi)初始化/ react-ionic-app中的
電容器項(xiàng)目????您的電容器項(xiàng)目已準(zhǔn)備就緒！????
使用“ npx cap add”添加平臺(tái)：
npx
cap
add
android
npx
cap
add
ios
npx
cap
add
electron
按照開發(fā)人員工作流程指南進(jìn)行構(gòu)建：
https ：//capacitor.ionicframework.com/docs/basics/workflow
iOS項(xiàng)目
以下命令為Xcode生成iOS支持文件。
反應(yīng)離子-應(yīng)用$
NPX
帽
加入
IOS
?
在20.32s安裝iOS的依賴性
?
在添加原生的Xcode項(xiàng)目：
/反應(yīng)離子-應(yīng)用程序/ IOS
在37.37ms
?
添加
在20.36s
?
從構(gòu)建復(fù)制網(wǎng)絡(luò)資產(chǎn)
的ios /應(yīng)用/公眾
在712.87ms
?
在4.76ms復(fù)制本地橋
?
在2.28ms復(fù)制capacitor.config.json
?
副本
中731.23ms
?
在2.25ms更新的iOS插件
找到0電容插件IOS：
?
更新iOS原生的依賴關(guān)系：
?
更新IOS ：
[error]運(yùn)行更新時(shí)出錯(cuò)：[！]未知安裝選項(xiàng)：disable_input_output_paths。
更新Cocoapods
如果您收到“正在更新iOS本機(jī)依賴項(xiàng)”問題。
$
pod
repo
update
CocoaPods 1.7.0.rc.1可用。
要更新使用：`
sudo的創(chuàng)業(yè)板安裝的CocoaPods -事先
`
[！]這是一個(gè)測(cè)試版本中，我們很樂意你去嘗試。
sudo的創(chuàng)業(yè)板安裝的CocoaPods -事先
反應(yīng)離子-應(yīng)用$ NPX帽更新IOS
?
更新的iOS插件，12.39ms
發(fā)現(xiàn)0電容插件IOS：
?
更新iOS原生的依賴在9.81s
?
更新
在9.84s IOS
更新在9.871s完成
Android項(xiàng)目
以下命令生成Android SDK文件。
反應(yīng)離子-應(yīng)用$ NPX帽添加的Android
?
在28.66s安裝Android的依賴
?
在添加原生Android項(xiàng)目：在75.12ms /反應(yīng)離子-應(yīng)用程序/機(jī)器人
?
正在同步搖籃在51.01s
?
添加
在79.75s
?
復(fù)制的網(wǎng)絡(luò)資產(chǎn)從生成到Android /應(yīng)用/ src目錄/主/資產(chǎn)/公眾677.46ms
?
在2.39ms復(fù)制本地橋
?
復(fù)制
capacitor.config.json
在1.53ms
?
副本
中701.45ms
?
在2.77ms更新Android插件
發(fā)現(xiàn)0電容插件對(duì)于android：
?
在27.06ms更新android
Elector Desktop Project
這將生成桌面SDK文件。有關(guān)更多信息，請(qǐng)查看
Ionic Electron Desktop App
反應(yīng)離子-應(yīng)用$ NPX帽添加電子
?
添加
電子
項(xiàng)目：
/反應(yīng)離子-應(yīng)用/電子
在17.66ms
?安裝NPM DependenciesInstalling NPM的依賴......
?
addyarn
安裝v1.16.0
信息無鎖文件中。
[1/4]解析包...
[2/4]獲取包...
[3/4]鏈接依賴項(xiàng)...
[4/4]構(gòu)建新包...
成功保存的lockfile。
完成時(shí)間為36.18秒。
警告電子>電子下載>金塊>進(jìn)度流>通過2> xtend> object-keys@0.4.0 ：
已安裝NPM依賴項(xiàng)！
?
在36.58s中安裝NPM依賴項(xiàng)
?
添加
36.60s
?將網(wǎng)絡(luò)資產(chǎn)從構(gòu)建復(fù)制到電子/ appCleaning / Users / SrinivasTamada / Desktop / projects / react-ionic-app / electron / app ...
復(fù)制網(wǎng)絡(luò)資產(chǎn)...
?
將網(wǎng)絡(luò)資產(chǎn)從構(gòu)建復(fù)制到電子在1.07s /應(yīng)用
?
在2.23ms復(fù)印capacitor.config.json
?
拷貝
在1.08s
?
在682.89μp更新電子
更新移動(dòng)包
使用以下sync命令更新具有最新Web構(gòu)建更新的移動(dòng)包。
反應(yīng)離子-應(yīng)用$ NPX帽同步
?
復(fù)制網(wǎng)絡(luò)資產(chǎn)
積累
到
Android設(shè)備/應(yīng)用/ src目錄/主/資產(chǎn)/公眾
在609.50ms
?
復(fù)制在2.68ms本地橋
?
在1.54ms復(fù)制capacitor.config.json
?
副本
中634.23ms
?
更新Android插件在2.04ms
發(fā)現(xiàn)Android的0電容插件：
?
更新
的Android
在19.84ms
?
復(fù)制網(wǎng)絡(luò)資產(chǎn)
積累
到
IOS /應(yīng)用/公眾
在491.27ms
?
復(fù)制在1.29ms本地橋
?
復(fù)制capacitor.config。 JSON在2.72ms
?
拷貝
在502.19ms
?
在1.94ms更新的iOS插件
實(shí)測(cè)值0電容器插件IOS：
?
更新的iOS在15.03s天然依賴性
?
更新IOS
在15.04s
?從生成復(fù)制web資源給電子/ appCleaning /反應(yīng)離子應(yīng)用內(nèi)/電子/應(yīng)用程序...
?從構(gòu)建復(fù)制網(wǎng)絡(luò)資產(chǎn)，以電子/ appCopying網(wǎng)絡(luò)資產(chǎn)......
?
復(fù)制網(wǎng)絡(luò)資產(chǎn)積累到電子在610.96ms /應(yīng)用
?
復(fù)制在5.15ms capacitor.config.json
?
副本619.52ms
?
更新電子
在19.43μp
?
副本
中336.19μp
?
更新
的17.34μp網(wǎng)
同步在16.839s完成
構(gòu)建iOS應(yīng)用程序
按照?qǐng)?zhí)行Xcode構(gòu)建的命令，觀看視頻教程，您將了解更多。
$ npx 上限 開啟 ios
構(gòu)建Android應(yīng)用程序
使用Android SDK打開Android構(gòu)建>
$ npx cap 打開 android
構(gòu)建Electron桌面應(yīng)用程序
Open Electron構(gòu)建。
$ npx cap 打開 android
重慶分公司
重慶分公司
