Browse Source

added support for dynamic nav bar buttons

talkol 8 years ago
parent
commit
5d0f447896
3 changed files with 101 additions and 13 deletions
  1. 58
    2
      example/src/screens/SecondTabScreen.js
  2. 16
    4
      src/Screen.js
  3. 27
    7
      src/platformSpecific.ios.js

+ 58
- 2
example/src/screens/SecondTabScreen.js View File

2
   Text,
2
   Text,
3
   View,
3
   View,
4
   ScrollView,
4
   ScrollView,
5
-  TouchableOpacity
5
+  TouchableOpacity,
6
+  StyleSheet,
7
+  AlertIOS
6
 } from 'react-native';
8
 } from 'react-native';
7
 
9
 
8
 // important imports, the magic is here
10
 // important imports, the magic is here
12
 class SecondTabScreen extends Screen {
14
 class SecondTabScreen extends Screen {
13
   constructor(props) {
15
   constructor(props) {
14
     super(props);
16
     super(props);
17
+    this.buttonsCounter = 0;
15
   }
18
   }
16
   render() {
19
   render() {
17
     return (
20
     return (
18
       <View style={{flex: 1, padding: 20}}>
21
       <View style={{flex: 1, padding: 20}}>
19
-        <Text>Second Tab Screen</Text>
22
+
23
+        <TouchableOpacity onPress={ this.onChangeButtonsPress.bind(this) }>
24
+          <Text style={styles.button}>Change Buttons</Text>
25
+        </TouchableOpacity>
26
+
20
       </View>
27
       </View>
21
     );
28
     );
22
   }
29
   }
30
+  onChangeButtonsPress() {
31
+    let buttons;
32
+    if (this.buttonsCounter % 3 == 0) {
33
+      buttons = [
34
+        {
35
+          title: 'Edit',
36
+          id: 'edit'
37
+        },
38
+        {
39
+          icon: require('../../img/navicon_add.png'),
40
+          id: 'add'
41
+        }
42
+      ];
43
+    } else if (this.buttonsCounter % 3 == 1) {
44
+      buttons = [{
45
+        title: 'Save',
46
+        id: 'save'
47
+      }];
48
+    } else {
49
+      buttons = [];
50
+    }
51
+    this.buttonsCounter++;
52
+
53
+    this.navigator.setButtons({
54
+      rightButtons: buttons,
55
+      animated: true
56
+    });
57
+  }
58
+  onNavigatorEvent(event) {
59
+    if (event.id == 'edit') {
60
+      AlertIOS.alert('NavBar', 'Dynamic Edit button pressed');
61
+    }
62
+    if (event.id == 'add') {
63
+      AlertIOS.alert('NavBar', 'Dynamic Add button pressed');
64
+    }
65
+    if (event.id == 'save') {
66
+      AlertIOS.alert('NavBar', 'Dynamic Save button pressed');
67
+    }
68
+  }
23
 }
69
 }
24
 
70
 
71
+const styles = StyleSheet.create({
72
+  button: {
73
+    textAlign: 'center',
74
+    fontSize: 18,
75
+    marginBottom: 10,
76
+    marginTop:10,
77
+    color: 'blue'
78
+  }
79
+});
80
+
25
 // every screen must be registered with a unique name
81
 // every screen must be registered with a unique name
26
 Navigation.registerScreen('example.SecondTabScreen', () => SecondTabScreen);
82
 Navigation.registerScreen('example.SecondTabScreen', () => SecondTabScreen);

+ 16
- 4
src/Screen.js View File

3
 import Navigation from './Navigation';
3
 import Navigation from './Navigation';
4
 
4
 
5
 class Navigator {
5
 class Navigator {
6
-  constructor(navigatorID) {
6
+  constructor(navigatorID, screenInstance) {
7
     this.navigatorID = navigatorID;
7
     this.navigatorID = navigatorID;
8
+    this.screenInstance = screenInstance;
8
   }
9
   }
9
   push(params = {}) {
10
   push(params = {}) {
10
     return platformSpecific.navigatorPush(this, params);
11
     return platformSpecific.navigatorPush(this, params);
18
   dismissModal(params = {}) {
19
   dismissModal(params = {}) {
19
     return Navigation.dismissModal(params);
20
     return Navigation.dismissModal(params);
20
   }
21
   }
22
+  setButtons(params = {}) {
23
+    const navigatorEventID = this.screenInstance.listenOnNavigatorEvents();
24
+    return platformSpecific.navigatorSetButtons(this, navigatorEventID, params);
25
+  }
21
 }
26
 }
22
 
27
 
23
 export default class Screen extends Component {
28
 export default class Screen extends Component {
26
   constructor(props) {
31
   constructor(props) {
27
     super(props);
32
     super(props);
28
     if (props.navigatorID) {
33
     if (props.navigatorID) {
29
-      this.navigator = new Navigator(props.navigatorID);
34
+      this.navigator = new Navigator(props.navigatorID, this);
35
+    }
36
+    if (props.listenForEvents) {
37
+      this.listenOnNavigatorEvents();
30
     }
38
     }
31
-    if (props.navigatorEventID) {
32
-      this.navigatorEventSubscription = NativeAppEventEmitter.addListener(props.navigatorEventID, (event) => this.onNavigatorEvent(event));
39
+  }
40
+  listenOnNavigatorEvents() {
41
+    if (!this.navigatorEventSubscription) {
42
+      this.navigatorEventSubscription = NativeAppEventEmitter.addListener(this.props.navigatorEventID, (event) => this.onNavigatorEvent(event));
33
     }
43
     }
44
+    return this.props.navigatorEventID;
34
   }
45
   }
35
   onNavigatorEvent(event) {}
46
   onNavigatorEvent(event) {}
36
   componentWillUnmount() {
47
   componentWillUnmount() {
48
+    this.navigator = undefined;
37
     if (this.navigatorEventSubscription) {
49
     if (this.navigatorEventSubscription) {
38
       this.navigatorEventSubscription.remove();
50
       this.navigatorEventSubscription.remove();
39
     }
51
     }

+ 27
- 7
src/platformSpecific.ios.js View File

41
                   passProps={{
41
                   passProps={{
42
                     navigatorID: navigatorID,
42
                     navigatorID: navigatorID,
43
                     screenInstanceID: screenInstanceID,
43
                     screenInstanceID: screenInstanceID,
44
-                    navigatorEventID: navigatorEventID
44
+                    navigatorEventID: navigatorEventID,
45
+                    listenForEvents: !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons)
45
                   }}
46
                   }}
46
                   style={navigatorStyle}
47
                   style={navigatorStyle}
47
                   leftButtons={navigatorButtons.leftButtons}
48
                   leftButtons={navigatorButtons.leftButtons}
87
           passProps={{
88
           passProps={{
88
             navigatorID: navigatorID,
89
             navigatorID: navigatorID,
89
             screenInstanceID: screenInstanceID,
90
             screenInstanceID: screenInstanceID,
90
-            navigatorEventID: navigatorEventID
91
+            navigatorEventID: navigatorEventID,
92
+            listenForEvents: !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons)
91
           }}
93
           }}
92
           style={navigatorStyle}
94
           style={navigatorStyle}
93
           leftButtons={navigatorButtons.leftButtons}
95
           leftButtons={navigatorButtons.leftButtons}
110
   if (params.navigatorStyle) {
112
   if (params.navigatorStyle) {
111
     Object.assign(navigatorStyle, params.navigatorStyle);
113
     Object.assign(navigatorStyle, params.navigatorStyle);
112
   }
114
   }
113
-  let navigatorEventID;
115
+
116
+  const navigatorEventID = screenInstanceID + '_events';
114
   const navigatorButtons = Object.assign({}, screenClass.navigatorButtons);
117
   const navigatorButtons = Object.assign({}, screenClass.navigatorButtons);
115
   if (navigatorButtons.leftButtons) {
118
   if (navigatorButtons.leftButtons) {
116
     for (let i = 0 ; i < navigatorButtons.leftButtons.length ; i++) {
119
     for (let i = 0 ; i < navigatorButtons.leftButtons.length ; i++) {
117
-      navigatorEventID = screenInstanceID + '_events';
118
       navigatorButtons.leftButtons[i].onPress = navigatorEventID;
120
       navigatorButtons.leftButtons[i].onPress = navigatorEventID;
119
     }
121
     }
120
   }
122
   }
121
   if (navigatorButtons.rightButtons) {
123
   if (navigatorButtons.rightButtons) {
122
-    navigatorEventID = screenInstanceID + '_events';
123
     for (let i = 0 ; i < navigatorButtons.rightButtons.length ; i++) {
124
     for (let i = 0 ; i < navigatorButtons.rightButtons.length ; i++) {
124
-      navigatorEventID = screenInstanceID + '_events';
125
       navigatorButtons.rightButtons[i].onPress = navigatorEventID;
125
       navigatorButtons.rightButtons[i].onPress = navigatorEventID;
126
     }
126
     }
127
   }
127
   }
143
   passProps.navigatorID = navigator.navigatorID;
143
   passProps.navigatorID = navigator.navigatorID;
144
   passProps.screenInstanceID = screenInstanceID;
144
   passProps.screenInstanceID = screenInstanceID;
145
   passProps.navigatorEventID = navigatorEventID;
145
   passProps.navigatorEventID = navigatorEventID;
146
+  passProps.listenForEvents = !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons);
146
   Controllers.NavigationControllerIOS(navigator.navigatorID).push({
147
   Controllers.NavigationControllerIOS(navigator.navigatorID).push({
147
     title: params.title,
148
     title: params.title,
148
     component: params.screen,
149
     component: params.screen,
161
   });
162
   });
162
 }
163
 }
163
 
164
 
165
+function navigatorSetButtons(navigator, navigatorEventID, params) {
166
+  if (params.leftButtons) {
167
+    const buttons = params.leftButtons.slice(); // clone
168
+    for (let i = 0 ; i < buttons.length ; i++) {
169
+      buttons[i].onPress = navigatorEventID;
170
+    }
171
+    Controllers.NavigationControllerIOS(navigator.navigatorID).setLeftButtons(buttons, params.animated);
172
+  }
173
+  if (params.rightButtons) {
174
+    const buttons = params.rightButtons.slice(); // clone
175
+    for (let i = 0 ; i < buttons.length ; i++) {
176
+      buttons[i].onPress = navigatorEventID;
177
+    }
178
+    Controllers.NavigationControllerIOS(navigator.navigatorID).setRightButtons(buttons, params.animated);
179
+  }
180
+}
181
+
164
 function showModal(params) {
182
 function showModal(params) {
165
   if (!params.screen) {
183
   if (!params.screen) {
166
     console.error('showModal(params): params.screen is required');
184
     console.error('showModal(params): params.screen is required');
180
       passProps.navigatorID = navigatorID;
198
       passProps.navigatorID = navigatorID;
181
       passProps.screenInstanceID = screenInstanceID;
199
       passProps.screenInstanceID = screenInstanceID;
182
       passProps.navigatorEventID = navigatorEventID;
200
       passProps.navigatorEventID = navigatorEventID;
201
+      passProps.listenForEvents = !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons);
183
       return (
202
       return (
184
         <NavigationControllerIOS
203
         <NavigationControllerIOS
185
           id={navigatorID}
204
           id={navigatorID}
207
   navigatorPush,
226
   navigatorPush,
208
   navigatorPop,
227
   navigatorPop,
209
   showModal,
228
   showModal,
210
-  dismissModal
229
+  dismissModal,
230
+  navigatorSetButtons
211
 }
231
 }