Ionic React和Capacitor入门教程
Ionic React和Capacitor入门教程
Ionic是Angular移动应用程序开发最流行的框架。 现在，Ionic宣布推出React beta与RC和Vue Js。 这篇文章是关于Ionic React with Capacitor（Ionic Product）的开始。Capacitor 是Cross-Platform的原生程序，用于构建通用应用程序。 这篇博文将解释如何使用Ionic移动组件设置react项目并生成iOS，Android和桌面（Electron框架构建）应用程序。
GitHub Checkout
检查GIT分支并将分支切换为旧的以用于即将到来的步骤。
$git clone https://github.com/srinivastamada/react-ionic-app
$cd react-ionic-app
$git checkout chapter-1
$npm install
$npm run start
必需的软件
您需要以下软件才能启动该项目。
- Node.js 高版本
- NPM
- NPX(节点包执行器)
- Yarn
创建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';
class App extends Component { render() { return ( <IonApp></IonApp> ); } }
exportdefaultApp;
运行项目
使用以下命令执行项目。我建议使用 纱线 ，这适用于 React 。项目在 3000 港口运行。
npm run start
或者
yarn start
Compiled successfully!
You can now view react-ionic-app in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.0.17:3000/
构建项目 在项目 src 目录下
创建 页面 ， 组件 和 服务 文件夹。
生成React组件
React不提供任何命令行来自动生成组件。该 generact 是第三方插件，这将帮助你快速生成文件。
安装Generact
npm install -g generact
（这里有图图片，容量很大，下载见）
------------------------------------------分割线------------------------------------------
免费下载地址在 http://linux.linuxboy.net/
用户名与密码都是www.linuxboy.net
具体下载目录在 /2019年资料/8月/19日/Ionic React和Capacitor入门教程/
下载方法见
------------------------------------------分割线------------------------------------------
使用generact生成React组件
转到项目级别并执行generact命令。这将提示您需要复制哪些组件。
react-ionic-app$ generact
? Which component do you want to replicate? App
? How do you want to name App component? Header
? In which folder do you want to put Header component? src/components/Header
这样所有组件文件都会自动生成。
Header.js 在components文件夹下
创建 Header 组件。删除CSS导入，因为我们已经在App.js上导入了
import { IonHeader, IonTitle, IonToolbar } from '@ionic/react'; import React, { Component } from 'react';
class Header extends Component { render() { return ( <IonHeader> <IonToolbar color="danger"> <IonTitle>My Navigation Bar</IonTitle> </IonToolbar> </IonHeader> ); } }
exportdefaultHeader;
基于 标题的 复制 页脚 组件
react-ionic-app$ generact
? Which component do you want to replicate? Header
? How do you want to name Header component? Footer
? In which folder do you want to put Footer component? src/components
Footer.js
导入设计的 IonFooter 组件。
import{IonFooter,IonTitle,IonToolbar}from'@ionic/react';
class Footer extends Component { render() { return ( <IonFooter> <IonToolbar color="primary"> <IonTitle>Footer</IonTitle> </IonToolbar> </IonFooter> ); } }
exportdefaultFooter;
生成主页
使用 generact 复制主页的Header组件。
react-ionic-app$ generact
? Which component do you want to replicate? Header
? How do you want to name Header component? Home
? In which folder do you want to put Home component? src/pages
Home.js
包含页面内容。
import{
class Home extends Component { render() { return ( <IonContent> <IonCard> <IonCardHeader> <IonCardTitle>Welcome to Home Page</IonCardTitle> </IonCardHeader> </IonCard> </IonContent> ); } }
export default Home;
其他页面也是如此。
react-ionic-app$ generact
? Which component do you want to replicate? Home
? How do you want to name Home component? Settings
? In which folder do you want to put Settings component? src/pages
react-ionic-app$ generact
? Which component do you want to replicate? Home
? How do you want to name Home component? About
? In which folder do you want to put About component? src/pages
使用Ionic Components构建
App.js
现在导入所有组件，而 不是IonApp 。
import'@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css'; import { IonApp } from '@ionic/react'; import React, { Component } from 'react'; import Footer from './components/Footer/Footer'; import Header from './components/Header/Header'; import Home from './pages/Home/Home';class App extends Component { render() { return ( <IonApp> <Header /> <Home /> <Footer /> </IonApp> ); } }
exportdefaultApp;
您将找到Home组件的输出。
使用路由
现在我们需要使用路由连接所有页面。
在项目 src 目录下创建routes.js配置文件。
routes.js
使用React路由连接组件。这里路径*指的是404页面。
importReactfrom'react';
import NoPage from './pages/NoPage/NoPage'; const Routes = () => ( <BrowserRouter> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} />
<Route exact path="/settings" component={Settings} /> <Route exact path="*" component={NoPage} /> </Switch> </BrowserRouter> );
exportdefaultRoutes;
App.js
现在在主App页面中包含Routes。默认route加载主页。
import'@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css'; import { IonApp } from '@ionic/react'; import React, { Component } from 'react'; import Footer from './components/Footer/Footer'; import Header from './components/Header/Header'; import Routes from './routes'; class App extends Component { render() { return ( <IonApp> <Header /> <Routes /> <Footer /> </IonApp> ); } }export default App;
Home.js
要导航到其他页面，请使用 链接 组件进行重定向。
import{
class Home extends Component { render() { return ( <IonContent> <IonCard> <IonCardHeader> <IonCardTitle>Welcome to Home Page</IonCardTitle> <Link to="/about">About</Link> <Link to="/settings">Settings</Link> </IonCardHeader> </IonCard> </IonContent> ); } }
export default Home;
使用Capacitor - 构建移动应用程序
您需要使用以下插件将Web项目转换为移动应用程序。
npm install --save @capacitor/core @capacitor/cli
构建Web项目
您必须构建用于创建移动应用程序的Web项目。
npm run build
或者
yarn build
初始化Capacitor
命令 npx cap init 创建配置文件。修改webDir来 构建 ，而不是 www
react-ionic-app$ npx cap init
? App name YourAppName
? App Package ID (in Java package format, no dashes) com.reactionic.com
? Which npm client would you like to use? yarn
✔ Initializing Capacitor project in /react-ionic-app in 2.57ms
评论暂时关闭