手机版
你好,游客 登录 注册
背景:
阅读新闻

Ionic React和Capacitor入门教程

[日期:2019-08-19] 来源:Linux公社  作者:醉落红尘 [字体: ]

 

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';

import '@ionic/core/css/ionic.bundle.css';
import { IonApp } from '@ionic/react';
import React, { Component } from 'react';

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

Ionic是Angular移动应用程序开发最流行的框架。现在,Ionic宣布推出React beta

生成React组件
React不提供任何命令行来自动生成组件。该 generact 是第三方插件,这将帮助你快速生成文件。

安装Generact

npm install -g generact

(这里有图图片,容量很大,下载见)

可以到Linux公社资源站下载:

------------------------------------------分割线------------------------------------------ 

免费下载地址在 http://linux.linuxidc.com/ 

用户名与密码都是www.linuxidc.com 

具体下载目录在 /2019年资料/8月/19日/Ionic React和Capacitor入门教程/ 

下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm 

------------------------------------------分割线------------------------------------------

使用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

这样所有组件文件都会自动生成。 

Ionic是Angular移动应用程序开发最流行的框架。现在,Ionic宣布推出React beta

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';

import React, { Component } from '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{

IonCard,
IonCardHeader,
IonCardTitle,
IonContent
} from '@ionic/react';
import React, { Component } from 'react';

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是Angular移动应用程序开发最流行的框架。现在,Ionic宣布推出React beta

使用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配置文件。

Ionic是Angular移动应用程序开发最流行的框架。现在,Ionic宣布推出React beta

routes.js
使用React路由连接组件。这里路径*指的是404页面。

importReactfrom'react';

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import Settings from './pages/Settings/Settings';
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{

IonCard,
IonCardHeader,
IonCardTitle,
IonContent
} from '@ionic/react';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

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;

 

Ionic是Angular移动应用程序开发最流行的框架。现在,Ionic宣布推出React beta

使用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


🎉 Your Capacitor project is ready to go! 🎉

Add platforms using "npx cap add":

npx cap add android
npx cap add ios
npx cap add electron

Follow the Developer Workflow guide to get building:
https://capacitor.ionicframework.com/docs/basics/workflow

iOS项目
以下命令为Xcode生成iOS支持文件。

react-ionic-app$ npx cap add ios
Installing iOS dependencies in 20.32s
 Adding native xcode project in: /react-ionic-app/ios in 37.37ms
 add in 20.36s
 Copying web assets from build to ios/App/public in 712.87ms
 Copying native bridge in 4.76ms
 Copying capacitor.config.json in 2.28ms
 copy in 731.23ms
 Updating iOS plugins in 2.25ms
Found 0 Capacitor plugins for ios:
Updating iOS native dependencies:
update ios:
[error] Error running update: [!] Unknown installation options: disable_input_output_paths.

更新Cocoapods

如果您收到“Updating iOS native dependencies”问题。

$pod repo update

CocoaPods 1.7.0.rc.1 is available.
To update use: `sudo gem install cocoapods --pre`
[!] This is a test version we'd love you to try.

sudo gem install cocoapods --pre

react-ionic-app$ npx cap update ios
 Updating iOS plugins in 12.39ms
Found 0 Capacitor plugins for ios:
 Updating iOS native dependencies in 9.81s
 update ios in 9.84s
Update finished in 9.871s

Android项目
以下命令生成Android SDK文件。

react-ionic-app$ npx cap add android

 Installing android dependencies in 28.66s
 Adding native android project in: /react-ionic-app/android in 75.12ms
 Syncing Gradle in 51.01s
 add in 79.75s
 Copying web assets from build to android/app/src/main/assets/public in 677.46ms
 Copying native bridge in 2.39ms
 Copying capacitor.config.json in 1.53ms
 copy in 701.45ms
 Updating Android plugins in 2.77ms
Found 0 Capacitor plugins for android:
 update android in 27.06ms

Elector Desktop Project
这将生成桌面SDK文件。

react-ionic-app$ npx cap add electron
 Adding Electron project in: /react-ionic-app/electron in 17.66ms
⠋ Installing NPM DependenciesInstalling NPM Dependencies...
addyarn install v1.16.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 36.18s.

warning electron > electron-download > nugget > progress-stream > through2 > xtend > object-keys@0.4.0:

NPM Dependencies installed!
 Installing NPM Dependencies in 36.58s
 add in 36.60s
⠋ Copying web assets from build to electron/appCleaning /Users/SrinivasTamada/Desktop/projects/react-ionic-app/electron/app...
Copying web assets...
 Copying web assets from build to electron/app in 1.07s
 Copying capacitor.config.json in 2.23ms
 copy in 1.08s
 update electron in 682.89μp

更新移动包
使用以下sync命令更新具有最新Web构建更新的移动包。

react-ionic-app$ npx cap sync
 Copying web assets from build to android/app/src/main/assets/public in 609.50ms
 Copying native bridge in 2.68ms
 Copying capacitor.config.json in 1.54ms
 copy in 634.23ms
 Updating Android plugins in 2.04ms
Found 0 Capacitor plugins for android:
 update android in 19.84ms
 Copying web assets from build to ios/App/public in 491.27ms
 Copying native bridge in 1.29ms
 Copying capacitor.config.json in 2.72ms
 copy in 502.19ms
 Updating iOS plugins in 1.94ms
Found 0 Capacitor plugins for ios:
 Updating iOS native dependencies in 15.03s
 update ios in 15.04s
⠋ Copying web assets from build to electron/appCleaning /react-ionic-app/electron/app...
⠙ Copying web assets from build to electron/appCopying web assets...
 Copying web assets from build to electron/app in 610.96ms
 Copying capacitor.config.json in 5.15ms
 copy in 619.52ms
 update electron in 19.43μp
 copy in 336.19μp
 update web in 17.34μp
Sync finished in 16.839s

构建iOS应用程序
按照执行Xcode构建的命令。

$ npx cap open ios

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

$npx cap open android

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

 

$npx cap open android

Ionic React RC 发布,第一个重要版本  https://www.linuxidc.com/Linux/2019-08/160204.htm

 

Linux公社的RSS地址https://www.linuxidc.com/rssFeed.aspx

 

本文永久更新链接地址https://www.linuxidc.com/Linux/2019-08/160205.htm

linux
相关资讯       Ionic React  Capacitor 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款