Ionic React和Capacitor入门
时间:2021-03-30

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


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

$ 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
现在用CSS导入Ionic组件包。清除现有的App.css代码。

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

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

@ ionic / react 导入 { IonApp } ;

react 导入 React { Component } ;


class App 扩展 Component {

render () {

回来

IonApp / IonApp

;

}

}

出口 默认 App ;


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

npm run start

yarn start

编译成功!

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

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


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

Ionic React和Capacitor入门 Ionic React和Capacitor入门 Ionic React和Capacitor入门 Ionic React和Capacitor入门 Ionic React和Capacitor入门 Ionic React和Capacitor入门


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

npm install --save @ capacitor / core @ capacitor / cli


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

npm run build

yarn build


初始化电容
命令 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”添加平台:

npx cap add android
npx cap add ios
npx cap add electron

按照开发人员工作流程指南进行构建:
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本机依赖项”问题。

$ pod repo update

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 xtendobject-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完成



构建iOS应用程序
按照执行Xcode构建的命令,观看视频教程,您将了解更多。

$ npx 上限 开启 ios


构建Android应用程序
使用Android SDK打开Android构建

$ npx cap 打开 android


构建Electron桌面应用程序
Open Electron构建。

$ npx cap 打开 android