|
@@ -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
|
+```
|