NavigatorIOS
NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app.
NOTE: This Component is not maintained by Facebook
This component is under community responsibility. If a pure JavaScript solution fits your needs you may try the
Navigator
component instead.
Routes
A route is an object used to describe each page in the navigator. The first route is provided to NavigatorIOS as initialRoute
:
render: function() {
return (
<NavigatorIOS
initialRoute={{
component: MyView,
title: 'My View Title',
passProps: { myProp: 'foo' },
}}
/>
);
},
Now MyView will be rendered by the navigator. It will recieve the route object in the route
prop, a navigator, and all of the props specified in passProps
.
See the initialRoute propType for a complete definition of a route.
Navigator
A navigator
is an object of navigation functions that a view can call. It is passed as a prop to any component rendered by NavigatorIOS.
var MyView = React.createClass({
_handleBackButtonPress: function() {
this.props.navigator.pop();
},
_handleNextButtonPress: function() {
this.props.navigator.push(nextRoute);
},
...
});
A navigation object contains the following functions:
push(route)
- Navigate forward to a new routepop()
- Go back one pagepopN(n)
- Go back N pages at once. When N=1, behavior matchespop()
replace(route)
- Replace the route for the current page and immediately load the view for the new routereplacePrevious(route)
- Replace the route/view for the previous pagereplacePreviousAndPop(route)
- Replaces the previous route/view and transitions back to itresetTo(route)
- Replaces the top item and popToToppopToRoute(route)
- Go back to the item for a particular route objectpopToTop()
- Go back to the top item
Navigator functions are also available on the NavigatorIOS component:
var MyView = React.createClass({
_handleNavigationRequest: function() {
this.refs.nav.push(otherRoute);
},
render: () => (
<NavigatorIOS
ref="nav"
initialRoute={...}
/>
),
});
Props
initialRoute
barTintColor
itemWrapperStyle
navigationBarHidden
shadowHidden
tintColor
titleTextColor
translucent
Methods
push
popN
pop
replaceAtIndex
replace
replacePrevious
popToTop
popToRoute
replacePreviousAndPop
resetTo
handleNavigationComplete
renderNavigationStackItems
Reference
Props
initialRoute
NavigatorIOS uses "route" objects to identify child views, their props, and navigation bar configuration. "push" and all the other navigation operations expect routes to be like this:
Type | Required |
---|---|
object: {component: function,title: string,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: View} | Yes |
barTintColor
The background color of the navigation bar
Type | Required |
---|---|
string | No |
itemWrapperStyle
The default wrapper style for components in the navigator. A common use case is to set the backgroundColor for every page
Type | Required |
---|---|
View | No |
navigationBarHidden
A Boolean value that indicates whether the navigation bar is hidden
Type | Required |
---|---|
bool | No |
shadowHidden
A Boolean value that indicates whether to hide the 1px hairline shadow
Type | Required |
---|---|
bool | No |
tintColor
The color used for buttons in the navigation bar
Type | Required |
---|---|
string | No |
titleTextColor
The text color of the navigation bar title
Type | Required |
---|---|
string | No |
translucent
A Boolean value that indicates whether the navigation bar is translucent
Type | Required |
---|---|
bool | No |
Methods
push()
push((route: object));
popN()
popN((n: number));
pop()
pop();
replaceAtIndex()
replaceAtIndex((route: object), (index: number));
Replace a route in the navigation stack.
index
specifies the route in the stack that should be replaced. If it's negative, it counts from the back.
replace()
replace((route: object));
Replaces the top of the navigation stack.
replacePrevious()
replacePrevious((route: object));
Replace the current route's parent.
popToTop()
popToTop();
popToRoute()
popToRoute((route: object));
replacePreviousAndPop()
replacePreviousAndPop((route: object));
resetTo()
resetTo((route: object));
handleNavigationComplete()
handleNavigationComplete((e: Event));
renderNavigationStackItems()
renderNavigationStackItems();