Browse Source

Update README.md

Tal Kol 9 years ago
parent
commit
6f4e74cea7
1 changed files with 48 additions and 1 deletions
  1. 48
    1
      README.md

+ 48
- 1
README.md View File

@@ -252,7 +252,7 @@ All supported styles are defined [here](https://github.com/wix/react-native-cont
252 252
 
253 253
 #### Screen-specific style example
254 254
 
255
-Define a screen-specific style by adding `static navigatorStyle = {};` to the Screen definition.
255
+Define a screen-specific style by adding `static navigatorStyle = {...};` to the Screen definition.
256 256
 
257 257
 ```js
258 258
 class StyledScreen extends Screen {
@@ -270,3 +270,50 @@ class StyledScreen extends Screen {
270 270
      );
271 271
   }
272 272
 ```
273
+
274
+## Adding buttons to the navigator
275
+
276
+Nav bar buttons can be defined per-screen by adding `static navigatorButtons = {...};` on the Screen definition. Handle onPress events for the buttons by overriding the Screen's `onNavigatorEvent(event)` method.
277
+
278
+#### Buttons object format
279
+
280
+```js
281
+{
282
+  rightButtons: [], // buttons for the right side of the nav bar (optional)
283
+  leftButtons: [] // buttons for the left side of the nav bar (optional)
284
+}
285
+```
286
+
287
+#### Screen-specific buttons example
288
+
289
+```js
290
+class FirstTabScreen extends Screen {
291
+  static navigatorButtons = {
292
+    rightButtons: [
293
+      {
294
+        title: 'Edit', // for a textual button, provide the button title (label)
295
+        id: 'edit' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
296
+      },
297
+      {
298
+        icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name
299
+        id: 'add' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
300
+      }
301
+    ]
302
+  };
303
+  constructor(props) {
304
+    super(props);
305
+  }
306
+  onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
307
+    if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
308
+      AlertIOS.alert('NavBar', 'Edit button pressed');
309
+    }
310
+    if (event.id == 'add') {
311
+      AlertIOS.alert('NavBar', 'Add button pressed');
312
+    }
313
+  }
314
+  render() {
315
+    return (
316
+      <View style={{flex: 1}}>...</View>
317
+     );
318
+  }
319
+```