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 目录下
创建 页面 ， 组件 和 服务 文件夹。
生成React组件
React不提供任何命令行来自动生成组件。该 generact 是第三方插件，这将帮助你快速生成文件。
安装Generact
npm install -g generact
使用generact生成React组件
转到项目级别并执行generact命令。这将提示您需要复制哪些组件。
react-ionic-app $ generact
？您想要复制哪个组件？ 应用
？您想如何命名App组件？ 标题
？你想在哪个文件夹中放置Header组件？ SRC /部件/插头
这样所有组件文件都会自动生成。
Header.js 在components文件夹下
创建 Header 组件。删除CSS导入，因为我们已经在App.js上导入了
import {
IonHeader ，
IonTitle ，
IonToolbar
} 从 ' @离子/反应 ' ;
从 ' react ' 导入 React ， { Component } ;
class Header 扩展 Component {
render （） {
回来 （
< IonHeader >
< IonToolbar color = “ danger ” >
< IonTitle > 我的导航栏 </ IonTitle >
</ IonToolbar >
</ IonHeader >
） ;
}
}
导出 默认 标题 ;
基于 标题的 复制 页脚 组件
react-ionic-app $ generact
？您想要复制哪个组件？ 标题
？你想如何命名Header组件？ 页脚
？你想在哪个文件夹中放置Footer组件？ SRC /组件
Footer.js
导入设计的 IonFooter 组件。
从 ' @ ionic / react ' 导入 { IonFooter ， IonTitle ， IonToolbar } ;
从 ' react ' 导入 React ， { Component } ;
class Footer extends Component {
render （） {
回来 （
< IonFooter >
< IonToolbar color = “ primary ” >
< IonTitle > 页脚 </ IonTitle >
</ IonToolbar >
</ IonFooter >
） ;
}
}
导出 默认 页脚 ;
生成主页
使用 generact 复制主页的Header组件。
react-ionic-app $ generact
？您想要复制哪个组件？ 标题
？你想如何命名Header组件？ 家
？你想在哪个文件夹中放置Home组件？ SRC /页
Home.js
包含页面内容。
import {
IonCard ，
IonCardHeader ，
IonCardTitle ，
IonContent
} 从 ' @离子/反应 ' ;
从 ' react ' 导入 React ， { Component } ;
class Home extends Component {
render （） {
回来 （
< IonContent >
< IonCard >
< IonCardHeader >
< IonCardTitle > 欢迎来到主页 </ IonCardTitle >
</ IonCardHeader >
</ IonCard >
</ IonContent >
） ;
}
}
出口 默认 首页 ;
其他页面也是如此。
react-ionic-app $ generact
？您想要复制哪个组件？ 家
？你想如何命名Home组件？ 设置
？您想在哪个文件夹中放置设置组件？ src / pages
react-ionic-app $ generact
？您想要复制哪个组件？ 家
？你想如何命名Home组件？ 关于
？你想在哪个文件夹中放置关于组件？ SRC /页
您将在以下结构中找到生成的组件。
使用Ionic Components构建
App.js
现在导入所有组件，而 不是IonApp 。
import ' @ ionic / core / css / core.css ' ;
import ' @ ionic / core / css / ionic.bundle.css ' ;
从 ' @ ionic / react ' 导入 { IonApp } ;
从 ' react ' 导入 React ， { Component } ;
从 ' ./components/Footer/Footer ' 导入 页脚 ;
从 ' ./components/Header/Header ' 导入 标题 ;
从 ' ./pages/Home/Home ' 导入 主页 ;
class App 扩展 Component {
render （） {
回来 （
< IonApp >
< 标题 />
< Home />
< 页脚 />
</ IonApp >
） ;
}
}
出口 默认 App ;
您将找到Home组件的输出。
使用路由
现在我们需要使用路由连接所有页面。
在项目 src 目录下创建routes.js配置文件。
routes.js
使用React路由连接组件。这里路径*指的是404页面。
从 ' react ' 导入 React ;
从 ' react-router-dom ' 导入 { BrowserRouter ， Switch ， Route } ;
从 ' ./pages/Home/Home ' 导入 主页 ;
从 ' ./pages/About/About ' 导入 关于 ;
从 ' ./pages/Settings/Settings ' 导入 设置 ; 从 ' ./pages/NoPage/NoPage ' 导入 NoPage ;
const Routes = （） => （
< BrowserRouter >
< 开关 >
< Route exact path = “ / ” component = { Home } />
< Route exact path = “ / about ” component = { About } />
< Route exact path = “ / settings ” component = { Settings } />
< Route exact path = “ * ” component = { NoPage } />
</ Switch >
</ BrowserRouter >
） ;
导出 默认 路由 ;
App.js
现在在主App页面中包含Routes。默认路由加载主页。
import ' @ ionic / core / css / core.css ' ;
import ' @ ionic / core / css / ionic.bundle.css ' ;
从 ' @ ionic / react ' 导入 { IonApp } ;
从 ' react ' 导入 React ， { Component } ;
从 ' ./components/Footer/Footer ' 导入 页脚 ;
从 ' ./components/Header/Header ' 导入 标题 ;
从 ' ./routes ' 导入 路线 ;
class App 扩展 Component {
render （） {
回来 （
< IonApp >
< 标题 />
< 路线 />
< 页脚 />
</ IonApp >
） ;
}
}
出口 默认 App ;
Home.js
要导航到其他页面，请使用 链接 组件进行重定向。
import {
IonCard ，
IonCardHeader ，
IonCardTitle ，
IonContent
} 从 ' @离子/反应 ' ;
从 ' react ' 导入 React ， { Component } ;
从 ' react-router-dom ' 导入 { Link } ;
class Home extends Component {
render （） {
回来 （
< IonContent >
< IonCard >
< IonCardHeader >
< IonCardTitle > 欢迎来到主页 </ IonCardTitle >
< Link to = “ / about ” > 关于 </ Link >
< Link to = “ / settings ” > 设置 </ Link >
</ IonCardHeader >
</ IonCard >
</ IonContent >
） ;
}
}
出口 默认 首页 ;
使用电容器 - 构建移动应用程序
您需要使用以下插件将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
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69933200/viewspace-2649523/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/69933200/viewspace-2649523/
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
