update adding demo app,

03_source/mobile/src/pages/DemoReactShop/MainTabs.tsx

@@ -0,0 +1,81 @@
+// REQ0116/main-tab
+
+import React from 'react';
+import { IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
+import { Route, Redirect } from 'react-router';
+import { calendar, location, informationCircle, people } from 'ionicons/icons';
+import SchedulePage from '../SchedulePage';
+import SpeakerList from '../SpeakerList';
+import SpeakerDetail from '../SpeakerDetail';
+import SessionDetail from '../SessionDetail';
+import MapView from '../MapView';
+import About from '../About';
+import EventList from '../EventList';
+import MembersNearByList from '../MembersNearByList';
+import OrderList from '../OrderList';
+import MyProfile from '../MyProfile';
+import MessageList from '../MessageList';
+import paths from '../../paths';
+import Favourites from '../Favourites';
+import TabAppRoute from '../../TabAppRoute';
+
+interface MainTabsProps {}
+
+const MainTabs: React.FC<MainTabsProps> = () => {
+  return (
+    <IonTabs>
+      <IonRouterOutlet>
+        {/* REQ0117/default-route */}
+        <Redirect exact path="/tabs" to="/tabs/events" />
+        {/*
+          Using the render method prop cuts down the number of renders your components will have due to route changes.
+          Use the component prop when your component depends on the RouterComponentProps passed in automatically.
+        */}
+        <Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
+        <Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
+        <Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} />
+
+        <Route path="/tabs/schedule/:id" component={SessionDetail} />
+        <Route path="/tabs/speakers/sessions/:id" component={SessionDetail} />
+        <Route path="/tabs/map" render={() => <MapView />} exact={true} />
+
+        <Route path="/tabs/about" render={() => <About />} exact={true} />
+
+        {/*  */}
+        <TabAppRoute />
+      </IonRouterOutlet>
+      {/*  */}
+      <IonTabBar slot="bottom">
+        {/*
+        <IonTabButton tab="speakers" href={'/tabs/speakers'}>
+          <IonIcon icon={calendar} />
+          <IonLabel>Speakers</IonLabel>
+        </IonTabButton>
+        */}
+
+        <IonTabButton tab="events" href={paths.EVENT_LIST}>
+          <IonIcon icon={calendar} />
+          <IonLabel>Event</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="nearby" href={paths.NEARBY_LIST}>
+          <IonIcon icon={people} />
+          <IonLabel>Nearby</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="orders" href={paths.ORDERS_LIST}>
+          <IonIcon icon={location} />
+          <IonLabel>Order</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="message" href={paths.MESSAGE_LIST}>
+          <IonIcon icon={informationCircle} />
+          <IonLabel>Message</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="my_profile" href={paths.PROFILE}>
+          <IonIcon icon={informationCircle} />
+          <IonLabel>Profile</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  );
+};
+
+export default MainTabs;