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';
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
------------------------------------------分割线------------------------------------------
具体下载目录在 /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上导入了
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';
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{
其他页面也是如此。
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';
exportdefaultApp;
您将找到Home组件的输出。
使用路由
现在我们需要使用路由连接所有页面。
在项目 src 目录下创建routes.js配置文件。
routes.js
使用React路由连接组件。这里路径*指的是404页面。
importReactfrom'react';
import NoPage from './pages/NoPage/NoPage';
<Route exact path="/settings" component={Settings} />
exportdefaultRoutes;
App.js
现在在主App页面中包含Routes。默认route加载主页。
import'@ionic/core/css/core.css';
Home.js
要导航到其他页面,请使用 链接 组件进行重定向。
import{
使用Capacitor - 构建移动应用程序
您需要使用以下插件将Web项目转换为移动应用程序。
npm install --save @capacitor/core @capacitor/cli
构建Web项目
您必须构建用于创建移动应用程序的Web项目。
npm run build
或者
yarn build
初始化Capacitor
命令 npx cap init 创建配置文件。修改webDir来 构建 ,而不是 www
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 > [email protected]:
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