Ion Menu and Tabs<\/p>\n\n\n\n
import React from 'react';\nimport { Redirect, Route } from 'react-router-dom';\nimport { IonApp, IonRouterOutlet, IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonSplitPane, IonTabs, IonTabBar, IonTabButton, IonLabel, IonBadge} from '@ionic\/react';\nimport { IonReactRouter } from '@ionic\/react-router';\nimport Home from '.\/pages\/Home';\n\n\/* Core CSS required for Ionic components to work properly *\/\nimport '@ionic\/react\/css\/core.css';\n\n\/* Basic CSS for apps built with Ionic *\/\nimport '@ionic\/react\/css\/normalize.css';\nimport '@ionic\/react\/css\/structure.css';\nimport '@ionic\/react\/css\/typography.css';\n\n\/* Optional CSS utils that can be commented out *\/\nimport '@ionic\/react\/css\/padding.css';\nimport '@ionic\/react\/css\/float-elements.css';\nimport '@ionic\/react\/css\/text-alignment.css';\nimport '@ionic\/react\/css\/text-transformation.css';\nimport '@ionic\/react\/css\/flex-utils.css';\nimport '@ionic\/react\/css\/display.css';\n\n\/* Theme variables *\/\nimport '.\/theme\/variables.css';\n\nconst App: React.FC = () => (\n <IonApp>\n\n <IonReactRouter>\n <IonSplitPane contentId=\"main\">\n <IonMenu side=\"start\" menuId=\"custom\" className=\"my-custom-menu\" contentId=\"main\">\n <IonHeader>\n <IonToolbar color=\"tertiary\">\n <IonTitle>Custom Menu<\/IonTitle>\n <\/IonToolbar>\n <\/IonHeader>\n <IonContent>\n <IonList>\n <IonItem href=\"\/home\">Menu Item<\/IonItem>\n <IonItem>Menu Item<\/IonItem>\n <IonItem>Menu Item<\/IonItem>\n <IonItem>Menu Item<\/IonItem>\n <IonItem>Menu Item<\/IonItem>\n <\/IonList>\n <\/IonContent>\n <\/IonMenu>\n\n <IonRouterOutlet id=\"main\">\n <Route path=\"\/\" render={ () => <Redirect to=\"\/home\" \/>} \/>\n <Route path=\"\/home\" component={Home} exact={true} \/>\n <\/IonRouterOutlet>\n\n <IonTabs>\n <IonTabBar slot=\"bottom\">\n <IonTabButton tab=\"schedule\" href=\"\/home\">\n <IonLabel>Schedule<\/IonLabel>\n <IonBadge>6<\/IonBadge>\n <\/IonTabButton>\n\n <IonTabButton tab=\"speakers\">\n <IonLabel>Speakers<\/IonLabel>\n <\/IonTabButton>\n\n <IonTabButton tab=\"map\">\n <IonLabel>Map<\/IonLabel>\n <\/IonTabButton>\n\n <IonTabButton tab=\"about\">\n <IonLabel>About<\/IonLabel>\n <\/IonTabButton>\n <\/IonTabBar>\n <IonRouterOutlet>\n <Route path=\"\/\" render={ () => <Redirect to=\"\/home\" \/>} \/>\n <Route path=\"\/home\" component={Home} exact={true} \/>\n <\/IonRouterOutlet>\n <\/IonTabs>\n \n <\/IonSplitPane>\n <\/IonReactRouter>\n \n <\/IonApp>\n);\n\nexport default App;\n<\/code><\/pre>\n\n\n\nHow to create android apk from ionic app using capacitor<\/p>\n\n\n\n
git clone project_repo_url.git\ncd project\nnpm install\nionic serve\nionic build\nionic capacitor add android\nionic capacitor build android<\/code><\/pre>\n\n\nStep 1: install java \/ jre
Step 2: install node.js<\/p>\n
Step 3:
install android sdk installer Note: keep the path in file e.g. C:\\Users\\S4671314\\AppData\\Local\\Android\\android-sdk<\/p>\n
Step 4:
install all the packages default selected android Note select 4.4(W) package also<\/p>\n
Step 5: install antonwindows<\/p>\n
Step 6: Set environment variable
C:\\Users\\S4671314\\AppData\\Local\\Android\\android-sdk\\platform-tools
C:\\Users\\S4671314\\AppData\\Local\\Android\\android-sdk\\tools<\/p>\n
Step 7:
verify everything install perfect > npm > adb > git<\/p>\n
Step 8: install cordova ionic
> npm install -g cordova ionic<\/p>\n
Step 9: Create new project folder > ionic start HelloWorld blank<\/p>\n
Step 10:
> cd HelloWorld > ionic platform add android Edit index file \/www\/index.html<\/p>\n
Step 11:
run command in cmd > ionic build android<\/p>\n
Step 12: Copy the apk file to android device from platforms\/android\/build\/outputs\/apk\/android-debug.apk<\/p>\n
Cheers<\/p>","protected":false},"excerpt":{"rendered":"
Ion Menu and Tabs How to create android apk from ionic app using capacitor Step 1: install java \/ jreStep 2: install node.js Step 3:install android sdk installer Note: keep the path in file e.g. C:\\Users\\S4671314\\AppData\\Local\\Android\\android-sdk Step 4:install all the packages default selected android Note select 4.4(W) package also Step 5: install antonwindows Step 6: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":842,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/pages\/404"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=404"}],"version-history":[{"count":4,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/pages\/404\/revisions"}],"predecessor-version":[{"id":937,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/pages\/404\/revisions\/937"}],"up":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/pages\/842"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}