Set nodeRoles

Author: shirakaba

demo-react/src/components/HomeScreen.tsx

@@ -2,45 +2,64 @@ import * as React from 'react';
 import { StyleSheet } from 'react-nativescript';
 
 export function ExampleTabs() {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+
     return (
-        <tabs selectedIndex={1}>
+        <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>
+            <tabStrip nodeRole="tabStrip">
                 <tabStripItem>
-                    <label>Home</label>
-                    <image src="font://&#xf015;" className="fas" />
+                    <label nodeRole="label">Home</label>
+                    <image nodeRole="image" src="font://&#xf015;" className="fas" />
                 </tabStripItem>
                 <tabStripItem className="special">
-                    <label>Account</label>
-                    <image src="font://&#xf007;" className="fas" />
+                    <label nodeRole="label">Account</label>
+                    <image nodeRole="image" src="font://&#xf007;" className="fas" />
                 </tabStripItem>
                 <tabStripItem className="special">
-                    <label>Search</label>
-                    <image src="font://&#xf00e;" className="fas" />
+                    <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>
+            <tabContentItem nodeRole="items">
                 <gridLayout>
-                    <label className="h2 text-center">Home Page</label>
+                    <label nodeRole="label" className="h2 text-center">
+                        Home Page
+                    </label>
                 </gridLayout>
             </tabContentItem>
-            <tabContentItem>
+            <tabContentItem nodeRole="items">
                 <gridLayout>
-                    <label className="h2 text-center">Account Page</label>
+                    <label nodeRole="label" className="h2 text-center">
+                        Account Page
+                    </label>
                 </gridLayout>
             </tabContentItem>
-            <tabContentItem>
+            <tabContentItem nodeRole="items">
                 <gridLayout>
-                    <label className="h2 text-center">Search Page</label>
+                    <label nodeRole="label" className="h2 text-center">
+                        Search Page
+                    </label>
                 </gridLayout>
             </tabContentItem>
         </tabs>
     );
 }
 
 const styles = StyleSheet.create({
+    fullSize: {
+        height: '100%',
+        width: '100%'
+    },
     container: {
         height: '100%',
         flexDirection: 'column',