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

生成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

Ionic React和Capacitor入门相关推荐

基于Capacitor编写Ionic React二维码扫描应用
在上一篇文章中,我们简要演示了如何使用capacitor-plugin-dynamsoft-barcode-reader构建跨平台二维码扫描应用.在本文中,我们将使用Ionic React来构建一个二 ...
React Native小白入门学习路径——五
React Native小白入门学习路径--五序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
转: React系统的入门系统
评注:React系统的入门系统. 转: http://www.infoq.com/cn/search.action?queryString=%E6%B7%B1%E5%85%A5%E6%B5%85%E ...
视频教程-最新完整react教程从入门到精通包教包会-ReactJS
最新完整react教程从入门到精通包教包会 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客 ...
React 全家桶入门教程 01
React 全家桶入门教程 01 前面是基础课程(难度小,略过),后面是案例目的巩固react基础知识,查漏补缺(熟悉的部分快进) 学习相关的库的使用 https://study.163.com/ ...
React VR 快速入门完全教程
React VR 快速入门什么是React React是一个开放源代码的JavaScript库,为HTML呈现的数据提供了视图渲染.React视图通常使用指定的像HTML标签一样的组件来进行UI渲染 ...
React Native基础入门教程：初步使用Flexbox布局
一.长度的单位在开始任何布局之前,让我们来首先需要知道,在写React Native组件样式时,长度的不带单位的,它表示"与设备像素密度无关的逻辑像素点". 这个怎么理解呢? 我 ...
React.js 基础入门四--要点总结
JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想 ...
React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...

Ionic React和Capacitor入门

Ionic React和Capacitor入门相关推荐

最新文章

热门文章