Begin Frame -> Page setup

Author: shirakaba

demo-react/src/app.ts

@@ -10,10 +10,14 @@ purpose of the file is to pass control to the app’s first module.
 */
 
 import * as ReactNativeScript from 'react-nativescript';
-import { ExampleTabs as AppContainer } from './components/HomeScreen';
 import { registerTabs } from '@nativescript-community/ui-material-tabs/react';
+import { registerBottomNavigation } from '@nativescript-community/ui-material-bottom-navigation/react';
+import { AppContainer } from './components/AppContainer';
+// import { ExampleTabs as AppContainer } from './components/TabsScreen';
+// import { ExampleBottomNavigation as AppContainer } from './components/BottomNavigationScreen';
 
 registerTabs({ enableDebugLogging: true });
+registerBottomNavigation({ enableDebugLogging: true });
 ReactNativeScript.start(React.createElement(AppContainer, {}, null));
 
 /*

demo-react/src/components/AppContainer.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ListView } from 'react-nativescript';
+
+export function AppContainer() {
+    return (
+        <frame>
+            <page>
+                <label>Hello</label>
+            </page>
+        </frame>
+    );
+}

demo-react/src/components/BottomNavigationScreen.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+export function ExampleBottomNavigation() {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+    return (
+        <bottomNavigation
+            selectedIndex={selectedIndex}
+            onSelectedIndexChanged={(args) => {
+                setSelectedIndex(args.newIndex);
+            }}
+            style={{ backgroundColor: 'orange' }}
+        >
+            {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
+            <tabStrip nodeRole="tabStrip" style={{ backgroundColor: 'red' }}>
+                <tabStripItem nodeRole="items">
+                    <label nodeRole="label">Home</label>
+                    <image nodeRole="image" src="font://&#xf015;" className="fas" />
+                </tabStripItem>
+                <tabStripItem nodeRole="items">
+                    <label nodeRole="label">Account</label>
+                    <image nodeRole="image" src="font://&#xf007;" className="fas" />
+                </tabStripItem>
+                <tabStripItem nodeRole="items">
+                    <label nodeRole="label">Search</label>
+                    <image nodeRole="image" src="font://&#xf00e;" className="fas" />
+                </tabStripItem>
+            </tabStrip>
+
+            {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
+            <tabContentItem nodeRole="items">
+                <gridLayout style={{ backgroundColor: 'blue' }}>
+                    <label style={{ color: 'white' }}>Home Page</label>
+                </gridLayout>
+            </tabContentItem>
+            <tabContentItem nodeRole="items">
+                <gridLayout style={{ backgroundColor: 'cyan' }}>
+                    <label style={{ color: 'black' }}>Account Page</label>
+                </gridLayout>
+            </tabContentItem>
+            <tabContentItem nodeRole="items">
+                <gridLayout style={{ backgroundColor: 'magenta' }}>
+                    <label style={{ color: 'black' }}>Search Page</label>
+                </gridLayout>
+            </tabContentItem>
+        </bottomNavigation>
+    );
+}