Ionic React和Capacitor入门

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 目录下
创建 页面 ， 组件 和 服务 文件夹。

使用电容器 - 构建移动应用程序
您需要使用以下插件将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中的 电容器项目????您的电容器项目已准备就绪！???? 

使用“ npx cap 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> 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完成

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

$  npx  上限   开启  ios

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

$  npx    cap    打开  android

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

$  npx  cap  打开  android