Browse Source

add toggle tab bar navigation visibility

Ran Greenberg 8 years ago
parent
commit
7edfcb941d
4 changed files with 46 additions and 3 deletions
  1. 11
    0
      README.md
  2. 21
    0
      example/src/screens/ThirdTabScreen.js
  3. 4
    0
      src/Screen.js
  4. 10
    3
      src/platformSpecific.ios.js

+ 11
- 0
README.md View File

470
 });
470
 });
471
 ```
471
 ```
472
 
472
 
473
+* **toggleNavBar(params = {})**
474
+
475
+Toggle whether the navigation bar is displayed or not.
476
+
477
+```js
478
+this.props.navigator.toggleNavBar({
479
+  to: 'hidden', // required, 'hidden' = hide navigation bar, 'shown' = show navigation bar
480
+  animated: true // does the toggle have transition animation or does it happen immediately (optional). By default animated: true
481
+});
482
+```
483
+
473
 ## Styling the navigator
484
 ## Styling the navigator
474
 
485
 
475
 You can style the navigator appearance and behavior by passing a `navigatorStyle` object. This object can be passed when the screen is originally created; can be defined per-screen by setting `static navigatorStyle = {};` on the screen component; and can be overridden when a screen is pushed.
486
 You can style the navigator appearance and behavior by passing a `navigatorStyle` object. This object can be passed when the screen is originally created; can be defined per-screen by setting `static navigatorStyle = {};` on the screen component; and can be overridden when a screen is pushed.

+ 21
- 0
example/src/screens/ThirdTabScreen.js View File

13
   };
13
   };
14
   constructor(props) {
14
   constructor(props) {
15
     super(props);
15
     super(props);
16
+    this.state = {
17
+      navBarVisability: 'shown'
18
+    }
16
   }
19
   }
17
   render() {
20
   render() {
18
     return (
21
     return (
34
           <Text style={styles.button}>Show Modal Screen</Text>
37
           <Text style={styles.button}>Show Modal Screen</Text>
35
         </TouchableOpacity>
38
         </TouchableOpacity>
36
 
39
 
40
+        <TouchableOpacity onPress={ this.onToggleNavBarPressed.bind(this) }>
41
+          <Text style={styles.button}>Toggle Navigation Bar</Text>
42
+        </TouchableOpacity>
43
+
37
       </View>
44
       </View>
38
     );
45
     );
39
   }
46
   }
62
       screen: "example.ModalScreen"
69
       screen: "example.ModalScreen"
63
     });
70
     });
64
   }
71
   }
72
+
73
+  onToggleNavBarPressed() {
74
+    this.state.navBarVisability = (this.state.navBarVisability === 'shown') ? 'hidden' : 'shown';
75
+    this.props.navigator.toggleNavBar({
76
+      to: this.state.navBarVisability,
77
+      animated: true  // true is default
78
+    });
79
+  }
80
+
81
+  componentDidUpdate() {
82
+    console.error('this is an error: ' + Math.random());
83
+    this.state.navBarState = 'shown';
84
+  }
85
+
65
 }
86
 }
66
 
87
 
67
 const styles = StyleSheet.create({
88
 const styles = StyleSheet.create({

+ 4
- 0
src/Screen.js View File

73
     return platformSpecific.navigatorToggleTabs(this, params);
73
     return platformSpecific.navigatorToggleTabs(this, params);
74
   }
74
   }
75
 
75
 
76
+  toggleNavBar(params = {}) {
77
+    return platformSpecific.navigatorToggleNavBar(this, params);
78
+  }
79
+
76
   setTabBadge(params = {}) {
80
   setTabBadge(params = {}) {
77
     return platformSpecific.navigatorSetTabBadge(this, params);
81
     return platformSpecific.navigatorSetTabBadge(this, params);
78
   }
82
   }

+ 10
- 3
src/platformSpecific.ios.js View File

242
   });
242
   });
243
 }
243
 }
244
 
244
 
245
-function navigatorSetTitleImage
246
-(navigator, params) {
245
+function navigatorSetTitleImage(navigator, params) {
247
   Controllers.NavigationControllerIOS(navigator.navigatorID).setTitleImage({
246
   Controllers.NavigationControllerIOS(navigator.navigatorID).setTitleImage({
248
     titleImage: params.titleImage
247
     titleImage: params.titleImage
249
   });
248
   });
250
 }
249
 }
251
 
250
 
251
+function navigatorToggleNavBar(navigator, params) {
252
+  Controllers.NavigationControllerIOS(navigator.navigatorID).setHidden({
253
+    hidden: ((params.to === 'hidden') ? true : false),
254
+    animated: params.animated
255
+  });
256
+}
257
+
252
 function navigatorToggleDrawer(navigator, params) {
258
 function navigatorToggleDrawer(navigator, params) {
253
   const controllerID = navigator.navigatorID.split('_')[0];
259
   const controllerID = navigator.navigatorID.split('_')[0];
254
   if (params.to == 'open') {
260
   if (params.to == 'open') {
415
   navigatorToggleDrawer,
421
   navigatorToggleDrawer,
416
   navigatorToggleTabs,
422
   navigatorToggleTabs,
417
   navigatorSetTabBadge,
423
   navigatorSetTabBadge,
418
-  navigatorSwitchToTab
424
+  navigatorSwitchToTab,
425
+  navigatorToggleNavBar
419
 }
426
 }