一.简介
使用导航器可以让你在应用的不同场景（页面）间进行切换。导航器通过路由对象来分辨不同的场景。利用renderScene方法，导航栏可以根据指定的路由来渲染场景。可以通过configureScene属性获取指定路由对象的配置信息，从而改变场景的动画或者手势。
二.使用示例
class NavigatorDemo extends Component { render() { //let 主要用于声明变量 let defaultName = 'List'; let defaultComponent = List; return ( <Navigator initialRoute = {{name:defaultName,component:defaultComponent}} configureScene ={ (route) => { //跳转动画 return Navigator.SceneConfigs.VerticalDownSwipeJump; } } renderScene ={ (route,navigator) => { let Component =route.component; //...ES6语法，遍历route所有的参数，赋值给Component 将navigator赋给Component 以便可以通过this.props.navigator获取导航器 return <Component {...route.params} navigator={navigator}/> } } /> ); } }
class List extends Component{ constructor(props){ super(props); this.state ={ id:'1',//列表页传到详情页的参数 user:null,//用于接收从详情页返回时的参数设置为null }; } _pressBtn(){ //const 表示常量 //为什么这里可以取得 props.navigator?请看上文: //<Component {...route.params} navigator={navigator} /> //这里传递了navigator作为props const self = this;//this,代表列表页 const {navigator} =this.props; if(navigator){ navigator.push({//通过push把名称和组件传递给导航器跳转 name:'detail', component:Detail, params:{ id:this.state.id,//获取列表页的id //从详情页获取user getUser:function(user){ self.setState({ user:user, }) } } }) }; } render(){ if(this.state.user){//从详情页获取到用户信息，加载用户信息 return ( <ScrollView style={styles.flex}> <Text style={styles.list_item} >用户信息:{JSON.stringify(this.state.user)}</Text> </ScrollView> ); }else{ return ( <ScrollView style={styles.flex}> <Text style={styles.list_item} onPress={this._pressBtn.bind(this)}>欢乐的敲代码1</Text> <Text style={styles.list_item} onPress={this._pressBtn.bind(this)}>欢乐的敲代码2</Text> <Text style={styles.list_item} onPress={this._pressBtn.bind(this)}>欢乐的敲代码3</Text> </ScrollView> ); } } }
const USER_INFO ={ 1:{name:'zhangsan', age:23}, 2:{name:'lisi', age:22}, };
class Detail extends Component{ constructor(props){ super(props); this.state={}; id:null } //页面加载完后会调用这个方法 componentDidMount(){ this.setState({ id:this.props.id,//从列表页传递过来的id }); } _pressItem(){ const {navigator} = this.props; if(this.props.getUser){ let user =USER_INFO[this.props.id]; this.props.getUser(user); } if(navigator){ navigator.pop(); } } render(){ return ( <ScrollView> <Text style={styles.list_item}>从第一个页面传递过来的id:{this.state.id}</Text> <Text style={styles.list_item} onPress={this._pressItem.bind(this)}>点击我可以返回</Text> </ScrollView> ); } }
const styles = StyleSheet.create({ flex:{ flex:1, }, list_item:{ marginLeft:20, marginRight:20, fontSize:20, borderBottomWidth:1, borderBottomColor:'#ddd', justifyContent:'center', height:40, }, });
效果
List主页面
点击list条目跳转到详情页面
点击'点击我可以返回' 回到前一个页面
三.导航方法
如果你得到了一个navigator对象的引用，则可以调用许多方法来进行导航：
- getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
- jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
- jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
- jumpTo(route) - 跳转到已有的场景并且不卸载。
- push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
- pop() - 跳转回去并且卸载掉当前场景
- replace(route) - 用一个新的路由替换掉当前场景
- replaceAtIndex(route, index) - 替换掉指定序列的路由场景
- replacePrevious(route) - 替换掉之前的场景
- resetTo(route) - 跳转到新的场景，并且重置整个路由栈
- immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
- popToRoute(route) - pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载。
- popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。
四.属性
- configureScene function
可选的函数，用来配置场景动画和手势。会带有一个或者两个参数调用，一个是当前的路由，一个是当前的路由栈。然后它应当返回一个场景配置对象
(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
以下为其他动画属性
Navigator.SceneConfigs.PushFromRight (默认)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump - initialRoute object
定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项。 - initialRouteStack [object]
提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性，它将被默认设置成一个只含有initialRoute的数组。 - navigationBar node
可选参数，提供一个在场景切换的时候保持的导航栏。 - navigator object
可选参数，提供从父导航器获得的导航器对象。 - onDidFocus function
每当导航切换完成或初始化之后，调用此回调，参数为新场景的路由。 - onWillFocus function
会在导航切换之前调用，参数为目标路由。 - renderScene function
必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。
(route,navigator) =>{ let Component =route.component; return <Component {...route.params} navigator={navigator}/> - sceneStyle
将会应用在每个场景的容器上的样式。
