[深入剖析React Native]React Native组件之Navigator

1.简介

导航组件Navigator可以让app在不同页面进行切换。为达到这样的功能，Navigator提供了路由对象功能进行区分每个页面。

我们可以通过renderScene方法，Navaigator根据指定的路由进行渲染指定的界面。

除了以上功能之外，为了改变页面切换的动画或者页面的手势，该组件还提供configureScene属性来进行获取指定路由页面的配置对象信息。

对于页面切换动画或者更多的屏幕配置选项信息详情可以查看Navigator.SceneConfigs

2.动画手势属性

PushFromRight

FloatFromRight

FloatFromLeft

FloatFromBottom

FloatFromBottomAndroid

FadeAndroid

HorizontalSwipeJump

HorizontalSwipeJumpFromRight

VertivalUpSwipeJump

VertivalDownSwipeJump

更多属性，可以去修改NavigatorSceneConfigs.js这个文件。

3.Navigator方法

在使用导航器的时候，如果你已经获取了导航器对象的引用，我们可以进行调用以下一些方法来实现页面导航功能:getCurrentRoutes() 该进行返回存在的路由列表信息

getCurrentRoutes() 返回存在的路由列表信息

jumpBack() 回退操作，但是不会卸载（删除）当前页面

jumpForward() 跳转到相对于当前页面的下一个页面

jumpTo(route) 根据传入的路由信息，跳转到一个指定的页面（该页面不会卸载删除）

push(route) 导航切换到一个新的页面，新的页面进行压入栈。通过jumpForward()方法可以回退过去

pop 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面

replace(route) 只用传入的路由的指定页面进行替换掉当前的页面

replaceAtIndex(route, index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面

replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面

resetTo(route) 进行导航到新的界面，并且重置整个路由栈

immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈

popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除

popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除

4.Navigator属性风格

configureScene －－ function 方法， 该为可选的方法进行配置页面切换动画和手势。该会通过路由和路由栈两个参数调用，进行返回一个页面参数配置对象：(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

initialRoute －－ object 参数对象， 进行设置导航初始化的路由页面。路由是标识导航器渲染标识每一个页面的对象。initialRoute必须为initialRouteStack中的路由。同时initialRoute默认为initialRouteStack中路由栈的最后一项

initialRouteStack －－ [object] 参数对象数组 该是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用该最后一项作为初始路由。 如果initalRouteStack属性没有设置的话，该会生成只包含initalRoute值的数组

navigationBar －－ node 该为可选的参数，在页面切换中用来提供一个导航栏

navigator －－ object 该为可选参数，可以从父类导航器中获取导航器对象

onDidFoucs －－ function 该方法已经废弃，我们可以使用navigationContext.addListener(‘didfocus’,callback)方法进行替代。该会在每次页面切换完成或者初始化之后进行调用该方法。该参数为新页面的路由

onWillFocus －－function 该方法已经废弃，我们可以使用navigationContext.addListener(‘willfocus’,callback)方法进行替代。该会页面每次进行切换之前调用

renderScene －－ function 该为必须调用的方法，该用来渲染每一个路由指定的页面。参数为路由以及导航器对象两个参数，具体是方法如下:

(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />

sceneStyle －－ 样式风格，该继承了View视图的所有样式风格。该设置用于每个页面容器的风格

5.实例

'use strict';

import React, { Component }  from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableHighlight,
} from 'react-native';

class NavButton extends Component {
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor="#B5B5B5"
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}

class HomeScene extends Component {
render() {
return(
<View style={styles.container}>
<NavButton
onPress={() => {
this.props.navigator.push({
component: ConfigsScene,
name: '手势属性',
});
}}
text='手势属性'
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: MethodsScene,
name: '方法',
});
}}
text='方法'
/>
</View>
);
}
}

class ConfigsScene extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.messageText}>{this.props.message}</Text>
<NavButton
onPress={() => {
this.props.navigator.pop();
}}
text="返回上一页"
/>

<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,
sceneConfig: Navigator.SceneConfigs.PushFromRight,
});
}}
text="PushFromRight default"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,
sceneConfig: Navigator.SceneConfigs.FloatFromRight,
});
}}
text="FloatFromRight"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,
sceneConfig: Navigator.SceneConfigs.FloatFromLeft,
});
}}
text="FloatFromLeft"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,
sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
});
}}
text="FloatFromBottom"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,
sceneConfig: Navigator.SceneConfigs.FloatFromBottomAndroid,
});
}}
text="FloatFromBottomAndroid"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,
sceneConfig: Navigator.SceneConfigs.FadeAndroid,
});
}}
text="FadeAndroid"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,
sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJump,
});
}}
text="HorizontalSwipeJump"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,
sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJumpFromRight,
});
}}
text="HorizontalSwipeJumpFromRight"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,
sceneConfig: Navigator.SceneConfigs.VerticalUpSwipeJump,
});
}}
text="VerticalUpSwipeJump"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,
sceneConfig: Navigator.SceneConfigs.VerticalDownSwipeJump,
});
}}
text="VerticalDownSwipeJump"
/>
</View>
);
}
}

class MethodsScene extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.messageText}>Current Routes length: {this.props.navigator.getCurrentRoutes().length}</Text>
<NavButton
onPress={() => {
this.props.navigator.jumpBack();
}}
text='jumpBack'
/>
<NavButton
onPress={() => {
}}
text='jumpForward'
/>
<NavButton
onPress={() => {
}}
text='jumpTo'
/>
</View>
);
}
}

class EndScene extends Component {
render() {
return (
<View style={styles.container}>
<NavButton
onPress={() => {
this.props.navigator.pop();
}}
text="返回上一页"
/>
<NavButton
onPress={() => {
this.props.navigator.popToTop();
}}
text="退到栈中第一个页面"
/>
</View>
);
}
}

export default class NavigatorMazouri extends Component {
render() {
return (
<Navigator
style={styles.container}
initialRoute={{
component: HomeScene,
name: 'home'
}}
renderScene={(route, navigator) => {
let Component = route.component;
if(route.component) {
return <Component {...route.params} navigator={navigator} />
}
}}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.PushFromRight;
}}
/>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
messageText: {
fontSize: 17,
fontWeight: '500',
padding: 15,
marginTop: 50,
marginLeft: 15,
},
button: {
backgroundColor: 'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#CDCDCD',
},
});