mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-05-12 19:48:30 +08:00
[Nav] Add support for bar button icons and left buttons
Summary:
NavigatorIOS supports four new properties:
- **rightButtonImageSource:** The source of an image to display in the top right. This must be a static image since UINavigationController only supports UIImages. Adding support for UIImageViews (or arbitrary views) is more complicated because custom views do not fade on touch and do not have hit slop the same way that UIImage buttons do. Usage: `rightButtonImageSource: ix('ImageName')`
- **backButtonImageSource:** Use a custom image for the back button. This does not replace the back caret (`<`) but instead replaces the text next to it.
- **leftButtonTitle**: Text for the left nav button, which supersedes the previous nav item's back button when specified. The main use case for this is your initial screen/UIVC which has nothing to go back to (since it is the first VC on the stack) but need to display a left button. This does hide the back button if there would have been one otherwise.
- **leftButtonImageSource:** Image source for the left button, super
Closes https://github.com/facebook/react-native/pull/263
Github Author: James Ide <ide@jameside.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
This commit is contained in:
@@ -39,3 +39,8 @@ declare module 'image!uie_thumb_selected' {
|
||||
declare var uri: string;
|
||||
declare var isStatic: boolean;
|
||||
}
|
||||
|
||||
declare module 'image!NavBarButtonPlus' {
|
||||
declare var uri: string;
|
||||
declare var isStatic: boolean;
|
||||
}
|
||||
|
||||
@@ -19,6 +19,7 @@ var React = require('react-native');
|
||||
var ViewExample = require('./ViewExample');
|
||||
var createExamplePage = require('./createExamplePage');
|
||||
var {
|
||||
AlertIOS,
|
||||
PixelRatio,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
@@ -92,6 +93,30 @@ var NavigatorIOSExample = React.createClass({
|
||||
}
|
||||
});
|
||||
})}
|
||||
{this._renderRow('Custom Left & Right Icons', () => {
|
||||
this.props.navigator.push({
|
||||
title: NavigatorIOSExample.title,
|
||||
component: EmptyPage,
|
||||
leftButtonTitle: 'Custom Left',
|
||||
onLeftButtonPress: () => this.props.navigator.pop(),
|
||||
rightButtonIcon: require('image!NavBarButtonPlus'),
|
||||
onRightButtonPress: () => {
|
||||
AlertIOS.alert(
|
||||
'Bar Button Action',
|
||||
'Recognized a tap on the bar button icon',
|
||||
[
|
||||
{
|
||||
text: 'OK',
|
||||
onPress: () => console.log('Tapped OK'),
|
||||
},
|
||||
]
|
||||
);
|
||||
},
|
||||
passProps: {
|
||||
text: 'This page has an icon for the right button in the nav bar',
|
||||
}
|
||||
});
|
||||
})}
|
||||
{this._renderRow('Pop', () => {
|
||||
this.props.navigator.pop();
|
||||
})}
|
||||
|
||||
21
Examples/UIExplorer/UIExplorer/Images.xcassets/NavBarButtonPlus.imageset/Contents.json
vendored
Normal file
21
Examples/UIExplorer/UIExplorer/Images.xcassets/NavBarButtonPlus.imageset/Contents.json
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"images" : [
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"scale" : "1x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"filename" : "NavBarButtonPlus@3x.png",
|
||||
"scale" : "3x"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"version" : 1,
|
||||
"author" : "xcode"
|
||||
}
|
||||
}
|
||||
BIN
Examples/UIExplorer/UIExplorer/Images.xcassets/NavBarButtonPlus.imageset/NavBarButtonPlus@3x.png
vendored
Normal file
BIN
Examples/UIExplorer/UIExplorer/Images.xcassets/NavBarButtonPlus.imageset/NavBarButtonPlus@3x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
Reference in New Issue
Block a user