Browse Source

added side menu drawer support

talkol 8 years ago
parent
commit
5e4453588a

BIN
example/img/navicon_menu@2x.png View File


+ 7
- 1
example/src/app.js View File

3
 import './screens/FirstTabScreen';
3
 import './screens/FirstTabScreen';
4
 import './screens/SecondTabScreen';
4
 import './screens/SecondTabScreen';
5
 import './screens/ThirdTabScreen';
5
 import './screens/ThirdTabScreen';
6
+import './screens/SideMenu';
6
 
7
 
7
 Navigation.startTabBasedApp({
8
 Navigation.startTabBasedApp({
8
   tabs: [
9
   tabs: [
33
         statusBarTextColorScheme: 'light'
34
         statusBarTextColorScheme: 'light'
34
       }
35
       }
35
     }
36
     }
36
-  ]
37
+  ],
38
+  drawer: {
39
+    left: {
40
+      screen: 'example.SideMenu'
41
+    }
42
+  }
37
 });
43
 });

+ 10
- 0
example/src/screens/FirstTabScreen.js View File

18
 // instead of React.Component, we extend Screen (imported above)
18
 // instead of React.Component, we extend Screen (imported above)
19
 class FirstTabScreen extends Screen {
19
 class FirstTabScreen extends Screen {
20
   static navigatorButtons = {
20
   static navigatorButtons = {
21
+    leftButtons: [{
22
+      icon: require('../../img/navicon_menu.png'),
23
+      id: 'menu'
24
+    }],
21
     rightButtons: [
25
     rightButtons: [
22
       {
26
       {
23
         title: 'Edit',
27
         title: 'Edit',
33
     super(props);
37
     super(props);
34
   }
38
   }
35
   onNavigatorEvent(event) {
39
   onNavigatorEvent(event) {
40
+    if (event.id == 'menu') {
41
+      this.navigator.toggleDrawer({
42
+        side: 'left',
43
+        animated: true
44
+      });
45
+    }
36
     if (event.id == 'edit') {
46
     if (event.id == 'edit') {
37
       AlertIOS.alert('NavBar', 'Edit button pressed');
47
       AlertIOS.alert('NavBar', 'Edit button pressed');
38
     }
48
     }

+ 40
- 0
example/src/screens/SideMenu.js View File

1
+import React, {
2
+  Text,
3
+  View,
4
+  ScrollView,
5
+  TouchableOpacity,
6
+  StyleSheet,
7
+  AlertIOS
8
+} from 'react-native';
9
+
10
+// important imports, the magic is here
11
+import { Navigation, Screen } from 'react-native-navigation';
12
+
13
+// instead of React.Component, we extend Screen (imported above)
14
+class SideMenu extends Screen {
15
+  constructor(props) {
16
+    super(props);
17
+  }
18
+  render() {
19
+    return (
20
+      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
21
+
22
+        <Text>Side Menu</Text>
23
+
24
+      </View>
25
+    );
26
+  }
27
+}
28
+
29
+const styles = StyleSheet.create({
30
+  button: {
31
+    textAlign: 'center',
32
+    fontSize: 18,
33
+    marginBottom: 10,
34
+    marginTop:10,
35
+    color: 'blue'
36
+  }
37
+});
38
+
39
+// every screen must be registered with a unique name
40
+Navigation.registerScreen('example.SideMenu', () => SideMenu);

+ 3
- 0
src/Screen.js View File

29
   setTitle(params = {}) {
29
   setTitle(params = {}) {
30
     return platformSpecific.navigatorSetTitle(this, params);
30
     return platformSpecific.navigatorSetTitle(this, params);
31
   }
31
   }
32
+  toggleDrawer(params = {}) {
33
+    return platformSpecific.navigatorToggleDrawer(this, params);
34
+  }
32
 }
35
 }
33
 
36
 
34
 export default class Screen extends Component {
37
 export default class Screen extends Component {

+ 44
- 1
src/platformSpecific.ios.js View File

17
   const controllerID = utils.getRandomId();
17
   const controllerID = utils.getRandomId();
18
   const Controller = Controllers.createClass({
18
   const Controller = Controllers.createClass({
19
     render: function() {
19
     render: function() {
20
+      if (!params.drawer || (!params.drawer.left && !params.drawer.right)) {
21
+        return this.renderBody();
22
+      } else {
23
+        const navigatorID = controllerID + '_drawer';
24
+        return (
25
+          <DrawerControllerIOS id={navigatorID}
26
+            componentLeft={params.drawer.left ? params.drawer.left.screen : undefined}
27
+            passPropsLeft={{navigatorID: navigatorID}}
28
+            componentRight={params.drawer.right ? params.drawer.right.screen : undefined}
29
+            passPropsRight={{navigatorID: navigatorID}}
30
+          >
31
+            {this.renderBody()}
32
+          </DrawerControllerIOS>
33
+        );
34
+      }
35
+    },
36
+    renderBody: function() {
20
       return (
37
       return (
21
         <TabBarControllerIOS id={controllerID + '_tabs'}>
38
         <TabBarControllerIOS id={controllerID + '_tabs'}>
22
         {
39
         {
68
   const controllerID = utils.getRandomId();
85
   const controllerID = utils.getRandomId();
69
   const Controller = Controllers.createClass({
86
   const Controller = Controllers.createClass({
70
     render: function() {
87
     render: function() {
88
+      if (!params.drawer || (!params.drawer.left && !params.drawer.right)) {
89
+        return this.renderBody();
90
+      } else {
91
+        const navigatorID = controllerID + '_drawer';
92
+        return (
93
+          <DrawerControllerIOS id={navigatorID}
94
+            componentLeft={params.drawer.left ? params.drawer.left.screen : undefined}
95
+            passPropsLeft={{navigatorID: navigatorID}}
96
+            componentRight={params.drawer.right ? params.drawer.right.screen : undefined}
97
+            passPropsRight={{navigatorID: navigatorID}}
98
+          >
99
+            {this.renderBody()}
100
+          </DrawerControllerIOS>
101
+        );
102
+      }
103
+    },
104
+    renderBody: function() {
71
       const screen = params.screen;
105
       const screen = params.screen;
72
       const navigatorID = controllerID + '_nav';
106
       const navigatorID = controllerID + '_nav';
73
       const screenInstanceID = utils.getRandomId();
107
       const screenInstanceID = utils.getRandomId();
174
   });
208
   });
175
 }
209
 }
176
 
210
 
211
+function navigatorToggleDrawer(navigator, params) {
212
+  const controllerID = navigator.navigatorID.split('_')[0];
213
+  Controllers.DrawerControllerIOS(controllerID + '_drawer').toggle({
214
+    side: params.side,
215
+    animated: params.animated
216
+  });
217
+}
218
+
177
 function navigatorSetButtons(navigator, navigatorEventID, params) {
219
 function navigatorSetButtons(navigator, navigatorEventID, params) {
178
   if (params.leftButtons) {
220
   if (params.leftButtons) {
179
     const buttons = params.leftButtons.slice(); // clone
221
     const buttons = params.leftButtons.slice(); // clone
241
   showModal,
283
   showModal,
242
   dismissModal,
284
   dismissModal,
243
   navigatorSetButtons,
285
   navigatorSetButtons,
244
-  navigatorSetTitle
286
+  navigatorSetTitle,
287
+  navigatorToggleDrawer
245
 }
288
 }