该组件本质上是对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 : 希望小二写的有所帮助,写得不好请谅解。