Ionic React和Capacitor入门

2024-11-18 技术教程

Ionic是Angular移动应用程序开发最流行的框架。现在，Ionic宣布推出React beta和Vue Js。这篇文章是关于Ionic React with Capacitor（Ionic Product）的开始。电容器是Cross-Platform的原生新娘，用于构建通用应用程序。这篇博文将解释如何使用Ionic移动组件设置react项目并生成iOS，Android和桌面（Electron框架构建）应用程序。

创建Ionic React项目
执行此命令以创建基于反应的离子项目。

$npxcreate-react-appreact-ionic-app--typescript
$cdreact-ionic-app

安装Ionic和React路由依赖。

$npminstall @ ionic / react
$npminstall react-router
$npminstall react-router-dom
$npminstall @ types / react-router
$npminstall @ types / react-router-dom

App.js
现在用CSS导入Ionic组件包。清除现有的App.css代码。

import'@ ionic / core / css / core.css';

import'@ ionic / core / css / ionic.bundle.css';

从'@ ionic / react'导入{IonApp};

从'react'导入React，{Component};

classApp扩展Component{

render（）{

回来（

）;

}

出口默认App;

运行项目
使用以下命令执行项目。我建议使用纱线，这适用于React。项目在3000港口运行。

npmrunstart
或
yarnstart

编译成功！

您现在可以在浏览器中查看react-ionic-app。

本地：http：// localhost：3000 /
在您的网络上：http：//192.168.0.17：3000 /

构建项目在项目src目录下
创建页面，组件和服务文件夹。

使用电容器 - 构建移动应用程序
您需要使用以下插件将Web项目转换为移动应用程序。

npminstall --save @ capacitor / core @ capacitor / cli

构建Web项目
您必须构建用于创建移动应用程序的Web项目。

npmrun build
或
yarnbuild

初始化电容
命令npx cap init创建配置文件。修改webDir来构建，而不是www

react-ionic-app $ npx cap init
？应用名称YourAppName
？应用程序包ID（采用Java包格式，无破折号）com.reactionic.com
？你想使用哪个npm客户端？纱线
✔在2.57ms内初始化/ react-ionic-app中的电容器项目????您的电容器项目已准备就绪！????

使用“npxcap add”添加平台：

npxcapaddandroid
npxcapaddios
npxcapaddelectron

按照开发人员工作流程指南进行构建：
https：//capacitor.ionicframework.com/docs/basics/workflow

iOS项目
以下命令为Xcode生成iOS支持文件。

反应离子-应用$NPX帽加入IOS
✔在20.32s安装iOS的依赖性
✔在添加原生的Xcode项目：/反应离子-应用程序/ IOS在37.37ms
✔添加在20.36s
✔从构建复制网络资产的ios /应用/公众在712.87ms
✔在4.76ms复制本地桥
✔在2.28ms复制capacitor.config.json
✔副本中731.23ms
✔在2.25ms更新的iOS插件
找到0电容插件IOS：
✖更新iOS原生的依赖关系：
✖更新IOS ：
[error]运行更新时出错：[！]未知安装选项：disable_input_output_paths。

更新Cocoapods
如果您收到“正在更新iOS本机依赖项”问题。

$podrepoupdate

CocoaPods 1.7.0.rc.1可用。
要更新使用：`sudo的创业板安装的CocoaPods -事先`
[！]这是一个测试版本中，我们很乐意你去尝试。

sudo的创业板安装的CocoaPods -事先

反应离子-应用$ NPX帽更新IOS
✔更新的iOS插件，12.39ms
发现0电容插件IOS：
✔更新iOS原生的依赖在9.81s
✔更新在9.84s IOS
更新在9.871s完成

Android项目
以下命令生成Android SDK文件。

反应离子-应用$ NPX帽添加的Android

✔在28.66s安装Android的依赖
✔在添加原生Android项目：在75.12ms /反应离子-应用程序/机器人
✔正在同步摇篮在51.01s
✔添加在79.75s
✔复制的网络资产从生成到Android /应用/ src目录/主/资产/公众677.46ms
✔在2.39ms复制本地桥
✔复制capacitor.config.json在1.53ms
✔副本中701.45ms
✔在2.77ms更新Android插件
发现0电容插件对于android：
✔在27.06ms更新android

Elector Desktop Project
这将生成桌面SDK文件。有关更多信息，请查看Ionic Electron Desktop App

反应离子-应用$ NPX帽添加电子
✔添加电子项目：/反应离子-应用/电子在17.66ms
⠋安装NPM DependenciesInstalling NPM的依赖......
⠴addyarn安装v1.16.0
信息无锁文件中。
[1/4]解析包...
[2/4]获取包...
[3/4]链接依赖项...
[4/4]构建新包...
成功保存的lockfile。
完成时间为36.18秒。

警告电子>电子下载>金块>进度流>通过2> xtend>object-keys@0.4.0：

已安装NPM依赖项！
✔在36.58s中安装NPM依赖项
✔添加36.60s
⠋将网络资产从构建复制到电子/ appCleaning / Users / SrinivasTamada / Desktop / projects / react-ionic-app / electron / app ...
复制网络资产...
✔将网络资产从构建复制到电子在1.07s /应用
✔在2.23ms复印capacitor.config.json
✔拷贝在1.08s
✔在682.89μp更新电子

更新移动包
使用以下sync命令更新具有最新Web构建更新的移动包。

反应离子-应用$ NPX帽同步
✔复制网络资产积累到Android设备/应用/ src目录/主/资产/公众在609.50ms
✔复制在2.68ms本地桥
✔在1.54ms复制capacitor.config.json
✔副本中634.23ms
✔更新Android插件在2.04ms
发现Android的0电容插件：
✔更新的Android在19.84ms
✔复制网络资产积累到IOS /应用/公众在491.27ms
✔复制在1.29ms本地桥
✔复制capacitor.config。 JSON在2.72ms
✔拷贝在502.19ms
✔在1.94ms更新的iOS插件
实测值0电容器插件IOS：
✔更新的iOS在15.03s天然依赖性
✔更新IOS在15.04s
⠋从生成复制web资源给电子/ appCleaning /反应离子应用内/电子/应用程序...
⠙从构建复制网络资产，以电子/ appCopying网络资产......
✔复制网络资产积累到电子在610.96ms /应用
✔复制在5.15ms capacitor.config.json
✔副本619.52ms
✔更新电子在19.43μp
✔副本中336.19μp
✔更新的17.34μp网
同步在16.839s完成