一、Navigator
1、简单介绍：大多数时候我们都需要导航器来应对不同场景（页面）间的切换。它通过路由对象来分辨不同的场景，我们这里采用的就是renderScene方法，根据指定的路由来渲染。
2、利用Navigator弹出用到的方法：
（1initialRoute={{ name: 'home', component: HomeScene }} 这个指定了默认的页面，也就是启动的组件页面
(2configureScene={() => {
return Navigator.SceneConfigs.HorizontalSwipeJump;
}}
这个是页面之间跳转时候的动画,可以看这个目录:
node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)
（3renderScene：两个参数中的route包含的事initial的时候传递的name和component，而navigator是一个我们需要用的Navigator的对象，所以当我们拿到route中的component的时候，我们就可以将navigator传递给它，正因为如此，我们的组件HomeScene才可以通过this.props.navigator，拿到路由。
（4 如果需要传参数，则在push的参数后面加多一个参数params，把JSON往死填就好了，这里的params，其实就是在renderScene中return的{...route.params},这样接收的页面只需要通过this.props.id，就可以拿到我们传递的参数
（5 OK，那参数怎么回传呢？回调！通过定义一个回调函数，利用this.props 去调用，把参数回传回来
完整代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/'use strict';varReact = require('react-native');//增加NavigatorIOSvar{ AppRegistry, StyleSheet, Text, View, Navigator, TouchableHighlight,} = React;/*-- 启动组件 --*/varMainClass = React.createClass({ render:function() {//component这里设置的是这个组件启动的时候显示的第一个子组件return({ return Navigator.SceneConfigs.HorizontalSwipeJump; }} renderScene={(route, navigator) => { let Component = route.component; if(route.component) { return} }} >); },});/*-- 首页页面组件 --*/var HomeScene = React.createClass({ getInitialState:function () { return { id: 'AXIBA001', flag: null }; }, render: function() { return (push me!{this.state.flag && ' I \'m ' + this.state.flag + ', i come from second page'}); }, onPress: function() { var _me = this; //或者写成 const navigator = this.props.navigator; const { navigator } = this.props; if(navigator) { navigator.push({ name: 'touch View', component: SecondScene, params: { id: this.state.id, getSomething:function(flag) { _me.setState({ flag: flag }); } } }) } }});/*-- push后的页面组件 --*/var SecondScene = React.createClass({ render: function() { return (push sucess!I get {this.props.id},i want back!); }, onPress: function() { //或者写成 const navigator = this.props.navigator; const { navigator } = this.props; if(this.props.getSomething) { var flag = 'Axiba002' this.props.getSomething(flag); } if(navigator) { navigator.pop(); } }});/*布局样式*/var styles = StyleSheet.create({ container: { flex: 1, // justifyContent: 'center', // alignItems: 'center', backgroundColor: '#F5FCFF', }, home: { paddingTop:74, },});AppRegistry.registerComponent('AwesonProject', () => MainClass);
补充一些可能会用到的Navigator方法：
getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
jumpTo(route) - 跳转到已有的场景并且不卸载。
push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
pop() - 跳转回去并且卸载掉当前场景
replace(route) - 用一个新的路由替换掉当前场景
replaceAtIndex(route, index) - 替换掉指定序列的路由场景
replacePrevious(route) - 替换掉之前的场景
immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
popToRoute(route) - pop到路由指定的场景，其他的场景将会卸载。
popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。
二、NavigatorIOS
1、NavigatorIOS包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。
2、同上包含的方法有：
push(route)- 导航器跳转到一个新的路由。
pop()- 回到上一页。
popN(n)- 回到N页之前。当N=1的时候，效果和pop()一样。
replace(route)- 替换当前页的路由，并立即加载新路由的视图。
replacePrevious(route)- 替换上一页的路由/视图。
replacePreviousAndPop(route)- 替换上一页的路由/视图并且立刻切换回上一页。
resetTo(route)- 替换最顶级的路由并且回到它。
popToRoute(route)- 一直回到某个指定的路由。
popToTop()- 回到最顶层的路由。
代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/'use strict';varReact = require('react-native');//增加NavigatorIOSvar{ AppRegistry, StyleSheet, Text, View, NavigatorIOS, TouchableHighlight,} = React;/*有这样一些需求？：自定义barBarItem，例如自定义名字、图片？*//*-- 启动组件 --*/varMainClass = React.createClass({ onRightButtonPress:function(){this.refs.nav.push({ title:'push view', component: SecondScene, }); }, render:function() {//component这里设置的是这个组件启动的时候显示的第一个子组件return(); },});/*-- 首页页面组件 --*/var HomeScene = React.createClass({ render: function() { return (push me!); }, onPress: function() { this.props.navigator.push({ title: 'touch View', component: SecondScene, passProps: { myProp: 'Axiba001' }, }); }});/*-- push后的页面组件 --*/var SecondScene = React.createClass({ render: function() { return (push sucess!{'hi,this is prams:'+ this.props.myProp}); },});/*布局样式*/var styles = StyleSheet.create({ container: { flex: 1, // justifyContent: 'center', // alignItems: 'center', backgroundColor: '#F5FCFF', }, home: { paddingTop:74, },});AppRegistry.registerComponent('AwesonProject', () => MainClass);
回调函数基本相同，但是注意还有一些对导航栏的控制，例如：
（1 barTintColorstring
导航条的背景颜色。
（2 initialRoute{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: [object Object]}
NavigatorIOS使用"路由"对象来包含要渲染的子视图、它们的属性、以及导航条配置。"push"和任何其它的导航函数的参数都是这样的路由对象。
（3 itemWrapperStyleView#style
导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色。
（4 navigationBarHiddenbool
一个布尔值，决定导航栏是否隐藏。
（ 5 shadowHiddenbool
一个布尔值，决定是否要隐藏1像素的阴影
（ 6 tintColorstring
导航栏上按钮的颜色。
（ 7 titleTextColorstring
导航器标题的文字颜色。
（8 translucentbool
一个布尔值，决定是否导航条是半透明的。
相关的链接地址在这里:http://www.tuicool.com/articles/z226zin
网友评论