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 >
);
}
}