' Use strict '; import React, {Component} from' React 'Import {appregistry, ScrollView, StyleSheet, Text, View, Touchablehighlight, Navigator,} from' React-native '; class Navbutton extends react.component{render () {return( <touchablehighlight style={Styles.button} underlaycolor= ' #b5b5b5 ' onpress={ This.props.onpress}> <text style={styles.text}>{ This.props.text}</text> </TouchableHighlight> ); }}class Navmenu extends react.component{render () {return( <view style={{flex:1,}}> <text style={styles.messagetext}>{ This.props.message}</text> <navbutton onpress={() =>{ This. Props.navigator.push ({message:' Push-in page ', SceneConfig:Navigator.SceneConfigs.FloatFromRight,});}} Text= ' push to Next Level page '/> <navbutton onpress={() = { This. Props.navigator.push ({message:' Present come in the page ', SceneConfig:Navigator.SceneConfigs.FloatFromBottom,}); }} Text= "present to next-level page"/> <navbutton onpress={() = { This. Props.navigator.pop (); }} Text= "Pop to previous page"/> <navbutton onpress={() = { This. Props.navigator.popToTop (); }} Text= "Pop to Main Page"/> </View> ); }}class MyProject extends Component {render () {return ( <navigator Style={styles.container} initialroute={{message: ' Main Page ',}} Renderscene={(Route,navigator) =><Navmenu Message={route.message} navigator={Navigator}/>} configurescene={(route) =>{if(route.sceneconfig) {returnRoute.sceneconfig; } returnNavigator.SceneConfigs.FloatFromBottom; }}/> ); }}const Styles=stylesheet.create ({container: {flex:1,}, MessageText: {fontSize:14, FontWeight:' 500 ', padding:15, MarginTop:50, MarginLeft:15,}, button: {backgroundcolor:' Green ', padding:15, BorderBottomWidth:StyleSheet.hairlineWidth, borderBottomColor:' Black ',}, text:{fontSize:14, Color:' White ', },}); Appregistry.registercomponent (' MyProject ', () = MyProject);
:
Reference case:
http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9% 8bnavigator%e7%bb%84%e4%bb%b6%e8%af%a6%e8%a7%a3%e4%bb%a5%e5%8f%8a%e5%ae%9e%e4%be%8b23/
Reactnative (2)-Navigator use case