Browse Source

added nav bar button support

talkol 8 years ago
parent
commit
70b08b057b

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


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


+ 22
- 1
example/src/screens/FirstTabScreen.js View File

3
   View,
3
   View,
4
   ScrollView,
4
   ScrollView,
5
   TouchableOpacity,
5
   TouchableOpacity,
6
-  StyleSheet
6
+  StyleSheet,
7
+  AlertIOS
7
 } from 'react-native';
8
 } from 'react-native';
8
 
9
 
9
 // important imports, the magic is here
10
 // important imports, the magic is here
16
 
17
 
17
 // instead of React.Component, we extend Screen (imported above)
18
 // instead of React.Component, we extend Screen (imported above)
18
 class FirstTabScreen extends Screen {
19
 class FirstTabScreen extends Screen {
20
+  static navigatorButtons = {
21
+    rightButtons: [
22
+      {
23
+        title: 'Edit',
24
+        id: 'edit'
25
+      },
26
+      {
27
+        icon: require('../../img/navicon_add.png'),
28
+        id: 'add'
29
+      }
30
+    ]
31
+  };
19
   constructor(props) {
32
   constructor(props) {
20
     super(props);
33
     super(props);
21
   }
34
   }
35
+  onNavigatorEvent(event) {
36
+    if (event.id == 'edit') {
37
+      AlertIOS.alert('NavBar', 'Edit button pressed');
38
+    }
39
+    if (event.id == 'add') {
40
+      AlertIOS.alert('NavBar', 'Add button pressed');
41
+    }
42
+  }
22
   render() {
43
   render() {
23
     return (
44
     return (
24
       <View style={{flex: 1, padding: 20}}>
45
       <View style={{flex: 1, padding: 20}}>

+ 13
- 1
example/src/screens/StyledScreen.js View File

4
   ScrollView,
4
   ScrollView,
5
   TouchableOpacity,
5
   TouchableOpacity,
6
   Image,
6
   Image,
7
-  StyleSheet
7
+  StyleSheet,
8
+  AlertIOS
8
 } from 'react-native';
9
 } from 'react-native';
9
 
10
 
10
 // important imports, the magic is here
11
 // important imports, the magic is here
21
     drawUnderTabBar: true,
22
     drawUnderTabBar: true,
22
     navBarTranslucent: true
23
     navBarTranslucent: true
23
   };
24
   };
25
+  static navigatorButtons = {
26
+    rightButtons: [{
27
+      icon: require('../../img/navicon_edit.png'),
28
+      id: 'compose'
29
+    }]
30
+  };
24
   constructor(props) {
31
   constructor(props) {
25
     super(props);
32
     super(props);
26
   }
33
   }
49
       </ScrollView>
56
       </ScrollView>
50
     );
57
     );
51
   }
58
   }
59
+  onNavigatorEvent(event) {
60
+    if (event.id == 'compose') {
61
+      AlertIOS.alert('NavBar', 'Compose button pressed');
62
+    }
63
+  }
52
   onPushPress() {
64
   onPushPress() {
53
     this.navigator.push({
65
     this.navigator.push({
54
       title: "More",
66
       title: "More",

+ 11
- 1
src/Screen.js View File

1
-import { Component } from 'react-native';
1
+import { Component, NativeAppEventEmitter } from 'react-native';
2
 import platformSpecific from './platformSpecific';
2
 import platformSpecific from './platformSpecific';
3
 import Navigation from './Navigation';
3
 import Navigation from './Navigation';
4
 
4
 
22
 
22
 
23
 export default class Screen extends Component {
23
 export default class Screen extends Component {
24
   static navigatorStyle = {};
24
   static navigatorStyle = {};
25
+  static navigatorButtons = {};
25
   constructor(props) {
26
   constructor(props) {
26
     super(props);
27
     super(props);
27
     if (props.navigatorID) {
28
     if (props.navigatorID) {
28
       this.navigator = new Navigator(props.navigatorID);
29
       this.navigator = new Navigator(props.navigatorID);
29
     }
30
     }
31
+    if (props.navigatorEventID) {
32
+      this.navigatorEventSubscription = NativeAppEventEmitter.addListener(props.navigatorEventID, (event) => this.onNavigatorEvent(event));
33
+    }
34
+  }
35
+  onNavigatorEvent(event) {}
36
+  componentWillUnmount() {
37
+    if (this.navigatorEventSubscription) {
38
+      this.navigatorEventSubscription.remove();
39
+    }
30
   }
40
   }
31
 }
41
 }

+ 55
- 9
src/platformSpecific.ios.js View File

22
         {
22
         {
23
           params.tabs.map(function(tab, index) {
23
           params.tabs.map(function(tab, index) {
24
             const navigatorID = controllerID + '_nav' + index;
24
             const navigatorID = controllerID + '_nav' + index;
25
+            const screenInstanceID = utils.getRandomId();
25
             if (!tab.screen) {
26
             if (!tab.screen) {
26
               console.error('startTabBasedApp(params): every tab must include a screen property, take a look at tab#' + (index+1));
27
               console.error('startTabBasedApp(params): every tab must include a screen property, take a look at tab#' + (index+1));
27
               return;
28
               return;
28
             }
29
             }
29
-            const { navigatorStyle } = _mergeScreenSpecificSettings(tab.screen, tab);
30
+            const {
31
+              navigatorStyle,
32
+              navigatorButtons,
33
+              navigatorEventID
34
+            } = _mergeScreenSpecificSettings(tab.screen, screenInstanceID, tab);
30
             return (
35
             return (
31
               <TabBarControllerIOS.Item {...tab} title={tab.label}>
36
               <TabBarControllerIOS.Item {...tab} title={tab.label}>
32
                 <NavigationControllerIOS
37
                 <NavigationControllerIOS
33
                   id={navigatorID}
38
                   id={navigatorID}
34
                   title={tab.title}
39
                   title={tab.title}
35
                   component={tab.screen}
40
                   component={tab.screen}
36
-                  passProps={{navigatorID: navigatorID}}
41
+                  passProps={{
42
+                    navigatorID: navigatorID,
43
+                    screenInstanceID: screenInstanceID,
44
+                    navigatorEventID: navigatorEventID
45
+                  }}
37
                   style={navigatorStyle}
46
                   style={navigatorStyle}
47
+                  leftButtons={navigatorButtons.leftButtons}
48
+                  rightButtons={navigatorButtons.rightButtons}
38
                 />
49
                 />
39
               </TabBarControllerIOS.Item>
50
               </TabBarControllerIOS.Item>
40
             );
51
             );
58
     render: function() {
69
     render: function() {
59
       const screen = params.screen;
70
       const screen = params.screen;
60
       const navigatorID = controllerID + '_nav';
71
       const navigatorID = controllerID + '_nav';
72
+      const screenInstanceID = utils.getRandomId();
61
       if (!screen.screen) {
73
       if (!screen.screen) {
62
         console.error('startSingleScreenApp(params): screen must include a screen property');
74
         console.error('startSingleScreenApp(params): screen must include a screen property');
63
         return;
75
         return;
64
       }
76
       }
65
-      const { navigatorStyle } = _mergeScreenSpecificSettings(screen.screen, screen);
77
+      const {
78
+        navigatorStyle,
79
+        navigatorButtons,
80
+        navigatorEventID
81
+      } = _mergeScreenSpecificSettings(screen.screen, screenInstanceID, screen);
66
       return (
82
       return (
67
         <NavigationControllerIOS
83
         <NavigationControllerIOS
68
           id={navigatorID}
84
           id={navigatorID}
69
           title={screen.title}
85
           title={screen.title}
70
           component={screen.screen}
86
           component={screen.screen}
71
-          passProps={{navigatorID: navigatorID}}
87
+          passProps={{
88
+            navigatorID: navigatorID,
89
+            screenInstanceID: screenInstanceID,
90
+            navigatorEventID: navigatorEventID
91
+          }}
72
           style={navigatorStyle}
92
           style={navigatorStyle}
93
+          leftButtons={navigatorButtons.leftButtons}
94
+          rightButtons={navigatorButtons.rightButtons}
73
         />
95
         />
74
       );
96
       );
75
     }
97
     }
78
   ControllerRegistry.setRootController(controllerID);
100
   ControllerRegistry.setRootController(controllerID);
79
 }
101
 }
80
 
102
 
81
-function _mergeScreenSpecificSettings(screenID, params) {
103
+function _mergeScreenSpecificSettings(screenID, screenInstanceID, params) {
82
   const screenClass = Navigation.getRegisteredScreen(screenID);
104
   const screenClass = Navigation.getRegisteredScreen(screenID);
83
   if (!screenClass) {
105
   if (!screenClass) {
84
     console.error('Cannot create screen ' + screenID + '. Are you it was registered with Navigation.registerScreen?');
106
     console.error('Cannot create screen ' + screenID + '. Are you it was registered with Navigation.registerScreen?');
88
   if (params.navigatorStyle) {
110
   if (params.navigatorStyle) {
89
     Object.assign(navigatorStyle, params.navigatorStyle);
111
     Object.assign(navigatorStyle, params.navigatorStyle);
90
   }
112
   }
91
-  return { navigatorStyle };
113
+  let navigatorEventID;
114
+  const navigatorButtons = Object.assign({}, screenClass.navigatorButtons);
115
+  if (navigatorButtons.leftButtons) {
116
+    for (let i = 0 ; i < navigatorButtons.leftButtons.length ; i++) {
117
+      navigatorEventID = screenInstanceID + '_events';
118
+      navigatorButtons.leftButtons[i].onPress = navigatorEventID;
119
+    }
120
+  }
121
+  if (navigatorButtons.rightButtons) {
122
+    navigatorEventID = screenInstanceID + '_events';
123
+    for (let i = 0 ; i < navigatorButtons.rightButtons.length ; i++) {
124
+      navigatorEventID = screenInstanceID + '_events';
125
+      navigatorButtons.rightButtons[i].onPress = navigatorEventID;
126
+    }
127
+  }
128
+  return { navigatorStyle, navigatorButtons, navigatorEventID };
92
 }
129
 }
93
 
130
 
94
 function navigatorPush(navigator, params) {
131
 function navigatorPush(navigator, params) {
96
     console.error('Navigator.push(params): params.screen is required');
133
     console.error('Navigator.push(params): params.screen is required');
97
     return;
134
     return;
98
   }
135
   }
99
-  const { navigatorStyle } = _mergeScreenSpecificSettings(params.screen, params);
100
-  const passProps = params.passProps || {};
136
+  const screenInstanceID = utils.getRandomId();
137
+  const {
138
+    navigatorStyle,
139
+    navigatorButtons,
140
+    navigatorEventID
141
+  } = _mergeScreenSpecificSettings(params.screen, screenInstanceID, params);
142
+  const passProps = Object.assign({}, params.passProps);
101
   passProps.navigatorID = navigator.navigatorID;
143
   passProps.navigatorID = navigator.navigatorID;
144
+  passProps.screenInstanceID = screenInstanceID;
145
+  passProps.navigatorEventID = navigatorEventID;
102
   Controllers.NavigationControllerIOS(navigator.navigatorID).push({
146
   Controllers.NavigationControllerIOS(navigator.navigatorID).push({
103
     title: params.title,
147
     title: params.title,
104
     component: params.screen,
148
     component: params.screen,
105
     animated: params.animated,
149
     animated: params.animated,
106
     passProps: passProps,
150
     passProps: passProps,
107
     style: navigatorStyle,
151
     style: navigatorStyle,
108
-    backButtonTitle: params.backButtonTitle
152
+    backButtonTitle: params.backButtonTitle,
153
+    leftButtons: navigatorButtons.leftButtons,
154
+    rightButtons: navigatorButtons.rightButtons
109
   });
155
   });
110
 }
156
 }
111
 
157