Add tabSelected logic to example-redux

example-redux/src/app.js

@@ -35,82 +35,82 @@ export default class App {
   startApp(root) {
     switch (root) {
       case 'login':
-        Navigation.startSingleScreenApp({
-         screen: {
-           screen: 'example.LoginScreen',
-           title: 'Login',
-           navigatorStyle: {}
-         },
-         passProps: {
-           str: 'This is a prop passed in \'startSingleScreenApp()\'!',
-           obj: {
-             str: 'This is a prop passed in an object!',
-             arr: [
-               {
-                 str: 'This is a prop in an object in an array in an object!'
-               }
-             ],
-             arr2: [
-               [
-                 'array of strings',
-                 'with two strings'
-               ],
-               [
-                 1, 2, 3
-               ]
-             ]
-           },
-           num: 1234,
-           fn: function() {
-             return 'Hello from a function!';
-           }
-         }
-        });
         // Navigation.startSingleScreenApp({
-        //   screen: {
-        //     screen: 'example.FirstTabScreen',
-        //     title: 'Login',
-        //     topTabs: [
-        //       {
-        //         screenId: 'example.ListScreen',
-        //         title: 'Tab1',
-        //         passProps: {
-        //           str: 'This is a prop passed to Tab1'
-        //         }
-        //       },
-        //       {
-        //         screenId: 'example.PushedScreen',
-        //         title: 'Tab2',
-        //         passProps: {
-        //           str: 'This is a prop passed to Tab2'
-        //         }
-        //
-        //       },
-        //       {
-        //         screenId: 'example.PushedScreen',
-        //         title: 'Tab3',
-        //         passProps: {
-        //           str: 'This is a prop passed to Tab3'
-        //         }
-        //       },
-        //       {
-        //         screenId: 'example.FirstTabScreen',
-        //         title: 'Tab4',
-        //         passProps: {
-        //           str: 'This is a prop passed to Tab4',
-        //           fn: () => 'Hello from a function passed as passProps!'
-        //         }
-        //       }
-        //     ],
-        //     navigatorStyle: {}
-        //   },
-        //   drawer: { // optional, add this if you want a side menu drawer in your app
-        //     left: { // optional, define if you want a drawer from the left
-        //       screen: 'example.SideMenu' // unique ID registered with Navigation.registerScreen
-        //     },
-        //     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
-        //   }
+        //  screen: {
+        //    screen: 'example.LoginScreen',
+        //    title: 'Login',
+        //    navigatorStyle: {}
+        //  },
+        //  passProps: {
+        //    str: 'This is a prop passed in \'startSingleScreenApp()\'!',
+        //    obj: {
+        //      str: 'This is a prop passed in an object!',
+        //      arr: [
+        //        {
+        //          str: 'This is a prop in an object in an array in an object!'
+        //        }
+        //      ],
+        //      arr2: [
+        //        [
+        //          'array of strings',
+        //          'with two strings'
+        //        ],
+        //        [
+        //          1, 2, 3
+        //        ]
+        //      ]
+        //    },
+        //    num: 1234,
+        //    fn: function() {
+        //      return 'Hello from a function!';
+        //    }
+        //  }
         // });
+        Navigation.startSingleScreenApp({
+          screen: {
+            screen: 'example.FirstTabScreen',
+            title: 'Login',
+            topTabs: [
+              {
+                screenId: 'example.ListScreen',
+                title: 'Tab1',
+                passProps: {
+                  str: 'This is a prop passed to Tab1'
+                }
+              },
+              {
+                screenId: 'example.PushedScreen',
+                title: 'Tab2',
+                passProps: {
+                  str: 'This is a prop passed to Tab2'
+                }
+
+              },
+              {
+                screenId: 'example.PushedScreen',
+                title: 'Tab3',
+                passProps: {
+                  str: 'This is a prop passed to Tab3'
+                }
+              },
+              {
+                screenId: 'example.FirstTabScreen',
+                title: 'Tab4',
+                passProps: {
+                  str: 'This is a prop passed to Tab4',
+                  fn: () => 'Hello from a function passed as passProps!'
+                }
+              }
+            ],
+            navigatorStyle: {}
+          },
+          drawer: { // optional, add this if you want a side menu drawer in your app
+            left: { // optional, define if you want a drawer from the left
+              screen: 'example.SideMenu' // unique ID registered with Navigation.registerScreen
+            },
+            disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
+          }
+        });
         return;
       case 'after-login':
         Navigation.startTabBasedApp({

example-redux/src/screens/ListScreen.js

@@ -40,33 +40,56 @@ class ListScreen extends Component {
 
   onNavigatorEvent(event) {
     if (event.type == 'DeepLink') {
-      const parts = event.link.split('/');
-      if (parts[0] == 'tab1' && parts[1] == 'pushScreen') {
-        this.props.navigator.toggleDrawer({
-          side: 'left',
-          animated: true,
-          to: 'closed'
-        });
-
-        this.props.navigator.push({
-          title: "Pushed from SideMenu",
-          screen: parts[2],
-          passProps: {
-            str: 'This is a prop passed in \'navigator.push()\'!',
-            obj: {
-              str: 'This is a prop passed in an object!',
-              arr: [
-                {
-                  str: 'This is a prop in an object in an array in an object!'
-                }
-              ]
-            },
-            num: 1234
-          }
-        });
-      }
+      this.handleDeepLink(event);
+      return;
     }
-      console.log('ListScreen', 'Unhandled event ' + event.id);
+
+    if (event.id == 'tabSelected') {
+      this.onTabSelected();
+      return;
+    }
+
+    console.log('ListScreen', 'Unhandled event ' + event.id);
+  }
+
+  handleDeepLink(event) {
+    const parts = event.link.split('/');
+    if (parts[0] == 'tab1' && parts[1] == 'pushScreen') {
+      this.props.navigator.toggleDrawer({
+        side: 'left',
+        animated: true,
+        to: 'closed'
+      });
+
+      this.props.navigator.push({
+        title: "Pushed from SideMenu",
+        screen: parts[2],
+        passProps: {
+          str: 'This is a prop passed in \'navigator.push()\'!',
+          obj: {
+            str: 'This is a prop passed in an object!',
+            arr: [
+              {
+                str: 'This is a prop in an object in an array in an object!'
+              }
+            ]
+          },
+          num: 1234
+        }
+      });
+    }
+  }
+
+  onTabSelected() {
+    console.log('ListScreen', 'onTabSelected');
+    this.props.navigator.setButtons({
+      rightButtons: [
+        {
+          id: 'account',
+          icon: require('../../img/ic_account_box_.png')
+        }
+      ]
+    });
   }
 
   render() {

example-redux/src/screens/PushedScreen.js

@@ -67,11 +67,28 @@ class PushedScreen extends Component {
         this.handleBackPress();
         break;
 
+      case 'tabSelected':
+        this.onTabSelected();
+        break;
+
       default:
         console.log('PushedScreen', 'Unknown event ' + event.id);
     }
   }
 
+  onTabSelected() {
+    console.log('PushedScreen', 'onTabSelected');
+    this.props.navigator.setButtons({
+      rightButtons: [
+        {
+          id: 'account',
+          icon: require('../../img/ic_add_alert.png')
+        }
+      ]
+    });
+  }
+
+
   handleBackPress() {
     Alert.alert(
       'Back button press!',