react-native Navigator with URI driven navigation facilitating simple transfer of data between components using query, and body parameters.
Install the module:
npm install --save react-native-route-navigator
Add it you your application:
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Navigator
} = React;
var { RouteNavigator, Router } = require('react-native-route-navigator');
class DemoApp extends React.Component {
render() {
return (
<RouteNavigator style={styles.container}
initialRouteStack={['/page1/my-id-string']}
router={this.router}
app={this}/>
);
}
get router() {
if ( !this._router ) {
this._router = new Router();
this.addRoutes(this._router);
}
return this._router;
}
addRoutes(router) {
// Add our routes here
router.addRoute( 'page1', '/page1/:id', Page1Component, {
defaultAnimation: Navigator.SceneConfigs.FadeAndroid,
});
router.addRoute( 'page2', '/page2/', Page2Component, {
defaultAnimation: Navigator.SceneConfigs.FloatFromRight,
props: {
name: 'joe',
didPressButton: () => alert('Action from my app!')
}
});
}
}
class Page1Component extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}> Page 1! </Text>
<Text> Called With ID: {this.query.id} </Text>
<TouchableHighlight style={styles.button}
onPress={this.goToPage2.bind(this)}>
<Text>Go To Page 2!</Text>
</TouchableHighlight>
</View>
);
}
goToPage2() {
this.props.nav.push('/page2/')
}
get query() {
return (this.state || {}).query || {};
}
}
class Page2Component extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}> Page 2! </Text>
<Text> Hello {this.props.name} </Text>
<TouchableHighlight style={styles.button}
onPress={this.goBack.bind(this)}>
<Text>Go Back!</Text>
</TouchableHighlight>
</View>
);
}
goBack() {
this.props.nav.pop();
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button: {
marginTop: 10,
backgroundColor: 'green',
padding: 15
},
title: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('DemoApp', () => DemoApp);This extends reacts Navigator class.
app- Application reference to pass to all managed components.Router- The composed router to use for route navigation.
name- The name of the route.URI- The route-parser URI.component- Unconstructed React component class to use for the page.optionsdefaultAnimation- The default animation to use if none are specific.props- The props to construct the component with.useCache- States if the component should persist when unmounted.
The RouteNavigator will construct mounted components with app and nav. app being the app prop passed to the route navigator, and nav being a reference to the Navigator component.
The nav object can be an object or a string.
Nav Object Components:
name- The name or URI of the routeanimation- The animation to use for the transitionprops- Additional props to use for the controllerbody- The body object to pass to the controller.
Example calls:
// Go back to previous controller in route stack
this.props.nav.pop();
// Navigate By URI
this.props.nav.push('/page1/123');
// URI with Non Default Animation
this.props.nav.push({
name: '/page1/123',
animation: Navigator.SceneConfigs.FadeAndroid,
props: {
isRed: true
},
body: {
cakeIs: 'lie'
}
});
// Navigate By Name
this.props.nav.push('page1');
this.props.nav.push({ name: 'page1'});You can receive URI parameters via this.state.query and the body object via this.state.body in the constructed component.