ソースを参照

added side menu drawer support

talkol 8 年 前
コミット
5e4453588a
共有6 個のファイルを変更した104 個の追加2 個の削除を含む
  1. バイナリ
      example/img/navicon_menu@2x.png
  2. 7
    1
      example/src/app.js
  3. 10
    0
      example/src/screens/FirstTabScreen.js
  4. 40
    0
      example/src/screens/SideMenu.js
  5. 3
    0
      src/Screen.js
  6. 44
    1
      src/platformSpecific.ios.js

バイナリ
example/img/navicon_menu@2x.png ファイルの表示


+ 7
- 1
example/src/app.js ファイルの表示

@@ -3,6 +3,7 @@ import { Navigation } from 'react-native-navigation';
3 3
 import './screens/FirstTabScreen';
4 4
 import './screens/SecondTabScreen';
5 5
 import './screens/ThirdTabScreen';
6
+import './screens/SideMenu';
6 7
 
7 8
 Navigation.startTabBasedApp({
8 9
   tabs: [
@@ -33,5 +34,10 @@ Navigation.startTabBasedApp({
33 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 ファイルの表示

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

+ 40
- 0
example/src/screens/SideMenu.js ファイルの表示

@@ -0,0 +1,40 @@
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 ファイルの表示

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

+ 44
- 1
src/platformSpecific.ios.js ファイルの表示

@@ -17,6 +17,23 @@ function startTabBasedApp(params) {
17 17
   const controllerID = utils.getRandomId();
18 18
   const Controller = Controllers.createClass({
19 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 37
       return (
21 38
         <TabBarControllerIOS id={controllerID + '_tabs'}>
22 39
         {
@@ -68,6 +85,23 @@ function startSingleScreenApp(params) {
68 85
   const controllerID = utils.getRandomId();
69 86
   const Controller = Controllers.createClass({
70 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 105
       const screen = params.screen;
72 106
       const navigatorID = controllerID + '_nav';
73 107
       const screenInstanceID = utils.getRandomId();
@@ -174,6 +208,14 @@ function navigatorSetTitle(navigator, params) {
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 219
 function navigatorSetButtons(navigator, navigatorEventID, params) {
178 220
   if (params.leftButtons) {
179 221
     const buttons = params.leftButtons.slice(); // clone
@@ -241,5 +283,6 @@ export default platformSpecific = {
241 283
   showModal,
242 284
   dismissModal,
243 285
   navigatorSetButtons,
244
-  navigatorSetTitle
286
+  navigatorSetTitle,
287
+  navigatorToggleDrawer
245 288
 }