React-native的 NavigatorIOS 组件的使用

该组件本质上是对UIKit navigation的包装。也就是说，使用NavigatorIOS进行路由切换，实质上是调用了UIKit的navigation。

路由是一个JavaScript对象，代表着一个页面（或者说视图）组件。NavigatorIOS组件默认的路由提供了initialRoute属性。示例代码如下：在上面代码中，component表示该页面需要加载的组件视图，title表示需要在头部显示的标题，passProps用于页面间传递数据。

这里要介绍一下NavigatorIOS组件的属性，具体如下所示：

barTintColor:导航条背景颜色。

initialRoute: 初始化路由。路由对象如下所示：

{

component: function, // 加载的视图组件

title: string, // 当前视图的标题

passProps: object, // 传递的数据

backButtonIcon: Image.propTypes.source, // 后退按钮图标

backButttonTitle: string, // 后退按钮标题

leftButtonIcon: Image.propTypes.source, // 左边按钮图标

leftButtonIcon: string, // 左边按钮标题

onLeftButtonPress: function, // 左边按钮点击事件

rightButtonIcon: Image.Types.source. //右边按钮图标

rightButtonTitle: string, // 右边按钮图标

onRightButtonPress: function, // 右边按钮点击事件

wrapperStyle: [object Object] // 包裹样式

}

ItemWrapperStyle: 为每一项定制样式，例如设置每个页面的背景颜色。

navigationBarHidden: 当其值为true时，隐藏导航栏。

shadowHidden: 是否隐藏阴影，其值为true或者false。

tintColor：导航栏上字体的颜色。

titleTextColor: 导航栏字体的颜色。

translucent: 导航栏是否半透明的，其值为true 或者false。

在组件视图切换的时候，navigator会作为一个属性对象被传递。我们可以通过this.props.navigator获得navigator对象。navigator是一个非常重要的对象，它可以控制路由的跳转和组件的加载。因此，要掌握NavigatorIOS组件，必须掌握navigator对象。navigator对象的主要方法如下所示：

push(route)：加载一个新的页面（视图或者路由）并且路由到该页面。

pop()：返回到上一个页面。

popN(n): 一次性返回N个页面，当N=1时，即相当于pop()方法的效果。

replace(route):替换当前的路由。

replacePrevious(route): 替换前一个页面的视图并且退过去。

resetTo(route)：取代最顶层的路由并且回退过去。

popToTop(): 回到最上层视图。

可以看到，navigator提供的方法已经很强大了。

Push的使用：

this.props.navigator.push({

component: View,

title: 'titile',

rightButtonTitle: 'buttonTitle'

})

PS : 希望小二写的有所帮助，写得不好请谅解。