导航
本文主要是实现ReactNative 的简单页面跳转
Navigator
initialRoute = {{name: defaultName, component: defaultComponent }}
- initialRoute指定了默认的页面，也就是启动的组件页面。
这里填什么参数是自定义的，因为这个参数也是你自己发自己收, 自己在renderScene方法中处理
- configureScene：跳转动画的样式， 具体哪些样式写的时候可以点击进去每个都试试， 这里就不一一列举啦。
configureScene={(route) => { return Navigator.SceneConfigs.HorizontalSwipeJumpFromLeft; }}
navigationBar ：可选参数，提供一个在场景切换的时候保持的导航栏。
navigator：可选参数，提供从父导航器获得的导航器对象。
renderScene：必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。
** 不多说， 我就直接上代码好不啦：**
import React, { Component } from 'react';
import {AppRegistry
, View
, Navigator} from 'react-native';
import FirstComponent from './FirstComponent';
// 引入当前目录下的FirstComponent.js文件 .js可以省略
class MyComponent extends Component {
render() {
let defaultName =' FirstComponent';
let defaultComponent = FirstComponent;
return (
<Navigator initialRoute={{ name: defaultName, component:defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.
HorizontalSwipeJumpFromLeft;
}}
renderScene={(route, navigator) => {
// route包含的就是上面initialRoute传递过来的name和component，
// 而navigator就是一个我们需要用的Navigator的对象，所以当我们拿到route中的component的时候，我们就可以将navigator传递给它，正因为如此，我们的组件MyPage才可以通过 this.props.navigator，拿到路由。
let Component = route.component;
return <Component {...route.params}
navigator={navigator}
/>
// 这个语法是把 routes.params 里的每个key 作为props的一个属性:
// 这是一个判断，如果传递进来的component存在，那我们就是返回一个这个component，结合前面 initialRoute 的参数，我们就是知道，这是一个会被render出来给用户看到的component，
// 然后navigator作为props传递给了这个component。
}}
/> );
}}
AppRegistry.registerComponent( 'MyProject', () => MyComponent);
*** FirstComponent 代码***
import React from 'react';
import {
View, Navigator, TouchableOpacity, Text
} from 'react-native';
import SecondPageComponent from './SecondPageComponent';
export default class FirstPageComponent extendsReact.Component {
constructor(props) {
super(props);
this.state = {};
}
_pressButton() {
const { navigator } = this.props;
//为什么这里可以取得props.navigator?请看上文:
//<Component {...route.params} navigator={navigator} />
//这里传递了navigator作为props
if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
params: {
id: this.state.id
// 这里的 params.id 就变成了 <Navigator id={} 传递给了下一个页面。
}
})
}
}
render() {
return (
<View style={{marginTop:200}}>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳转</Text>
</TouchableOpacity> </View>
);
}
}
补充一下其他方法：
- getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
- jumpBack() - 反回之前的路由，同时也保留现在的，你还可以再跳回来，会给你保留原样。
- jumpForward() -jumpBack()之后又想回去了
，用这个方法跳回来就好了。 - jumpTo(route) - 跳转到已有的场景并且不卸载。
- push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
- pop() - 跳转回去并且卸载掉当前场景
- replace(route) - 用一个新的路由替换掉当前场景
- replaceAtIndex(route, index) - 替换掉指定序列的路由场景
- replacePrevious(route) - 替换掉之前的场景
- immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
- popToRoute(route) - pop到路由指定的场景，其他的场景将会卸载。
- popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。
NavigatorIOS
对于iOS 平台开发， 使用NavigatorIOS。它是基于UINavigationController封装的。
粗略的看了下Navigator和NavigatorIOS大致用法相同。文档中强调了要渲染的组件在路由对象的component指定，由passProps传递参数。目标组件会自动接收navigator的属性， 可以直接调用this.props.navigator的push方法和pop方法。
NavigatorIOS的好处是它是使用原生的UIKIt导航， 所以当它跳转的时候会向IOS一样自动渲染一个带有返回按钮的导航栏 而且还有标题哦 😯。
<NavigatorIOS initialRoute={{component: MyView, title: '首页', passProps: { myProp: '首页' },}} />
下面就来简单介绍下NavigatorIOS
的属性和方法啦：
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]}：
这个大家就一个个设置下看看效果吧， 就是设置导航栏或者导航栏的子试图的属性。barTintColor ：这个大家都知道啦...导航栏的背景色。
tintColor :导航栏上按钮的颜色。
titleTextColor : 导航栏标题文字的颜色。
translucent ：导航栏是否有半透明效果（bool）。
shadowHidden：（bool）
是否隐藏导航栏底部那根线。navigationBarHidden：（bool） 导航栏是否隐藏。
itemWrapperStyle：设置所有页面的背景色 。
interactivePopGestureEnabled : （bool）
是否启用左滑手势返回， 默认的时候根据导航栏是否隐藏来决定是否启用， 如果设置的话以设置为主。push(route) - 跳转到一个新的页面。
pop() - 回到上一个页面。
popN(n) - 回到N页之前。当N=1的时候，就和pop()一样啦。
replace(route) - 替换当前页的路由，并立即加载新路由的视图。
replacePrevious(route) - 替换上一页的路由/视图。
replacePreviousAndPop(route) - 替换上一页的路由/视图，并且立刻反回上一页。
resetTo(route) - 替换最顶级的路由并且跳回到它。
popToRoute(route) - 反回到某个指定的路由。
popToTop() - 回到最顶层的路由。
代码奉上：
import React, { Component, PropTypes } from 'react';
import {
AppRegistry,
NavigatorIOS,
Text,
TouchableOpacity
} from 'react-native';
class MyView extends Component {
_handleBackPress() {
this.props.navigator.pop();
}
_handleNextPress(nextRoute){
this.props.navigator.push(nextRoute);
}
render() {
const nextRoute = {
component: MyView,
title: '跳',
passProps: { myProp: '跳' }
};
return(
<TouchableOpacity onPress={() => this._handleNextPress(nextRoute)}>
<Text style={{marginTop: 200, alignSelf: 'center'}}> See you on the other nav {this.props.myProp}!</Text>
</TouchableOpacity>
);
}
}
class NavvyIOS extends Component {
_handleNavigationRequest() {
this.refs.nav.push({
component: MyView,
title: '你要Add啥',
passProps: { myProp: 'Add' }, });
}
render() {
return (<NavigatorIOS
ref='nav'
initialRoute={{
component: MyView,
title: '首页',
passProps: { myProp: '首页' },
rightButtonTitle: 'Add',
onRightButtonPress: () => this._handleNavigationRequest(),
}}
style={{flex: 1}}
barTintColor='#ffffcc'
tintColor='#F55458' />
);
}
}
AppRegistry.registerComponent('MyProject', () => NavvyIOS);
