Working configuration for Tabs

Author: shirakaba

demo-react/src/components/HomeScreen.tsx

@@ -5,53 +5,48 @@ export function ExampleTabs() {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
 
     return (
-        <tabs
-            selectedIndex={selectedIndex}
-            onSelectedIndexChanged={(args) => {
-                console.log('onSelectedIndexChanged', args);
-                // setSelectedIndex(args.newIndex);
-            }}
-            style={{ ...styles.fullSize }}
-        >
-            {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
-            <tabStrip nodeRole="tabStrip">
-                <tabStripItem>
-                    <label nodeRole="label">Home</label>
-                    <image nodeRole="image" src="font://&#xf015;" className="fas" />
-                </tabStripItem>
-                <tabStripItem className="special">
-                    <label nodeRole="label">Account</label>
-                    <image nodeRole="image" src="font://&#xf007;" className="fas" />
-                </tabStripItem>
-                <tabStripItem className="special">
-                    <label nodeRole="label">Search</label>
-                    <image nodeRole="image" src="font://&#xf00e;" className="fas" />
-                </tabStripItem>
-            </tabStrip>
+        <page style={{ backgroundColor: 'yellow' }}>
+            <tabs
+                selectedIndex={selectedIndex}
+                onSelectedIndexChanged={(args) => {
+                    setSelectedIndex(args.newIndex);
+                }}
+                style={{ ...styles.fullSize, 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" className="special">
+                        <label nodeRole="label">Account</label>
+                        <image nodeRole="image" src="font://&#xf007;" className="fas" />
+                    </tabStripItem>
+                    <tabStripItem nodeRole="items" className="special">
+                        <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>
-                    <label nodeRole="label" className="h2 text-center">
-                        Home Page
-                    </label>
-                </gridLayout>
-            </tabContentItem>
-            <tabContentItem nodeRole="items">
-                <gridLayout>
-                    <label nodeRole="label" className="h2 text-center">
-                        Account Page
-                    </label>
-                </gridLayout>
-            </tabContentItem>
-            <tabContentItem nodeRole="items">
-                <gridLayout>
-                    <label nodeRole="label" className="h2 text-center">
-                        Search Page
-                    </label>
-                </gridLayout>
-            </tabContentItem>
-        </tabs>
+                {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
+                <tabContentItem nodeRole="items">
+                    <gridLayout nodeRole="content" style={{ ...styles.fullSize, backgroundColor: 'blue' }}>
+                        <label style={{ color: 'white' }}>Home Page</label>
+                    </gridLayout>
+                </tabContentItem>
+                <tabContentItem nodeRole="items">
+                    <gridLayout nodeRole="content" style={{ ...styles.fullSize, backgroundColor: 'cyan' }}>
+                        <label style={{ color: 'black' }}>Account Page</label>
+                    </gridLayout>
+                </tabContentItem>
+                <tabContentItem nodeRole="items">
+                    <gridLayout nodeRole="content" style={{ ...styles.fullSize, backgroundColor: 'magenta' }}>
+                        <label style={{ color: 'black' }}>Search Page</label>
+                    </gridLayout>
+                </tabContentItem>
+            </tabs>
+        </page>
     );
 }