React Native中NavigatorIOS组件的简单使用详解
一、NavigatorIOS组件介绍
1，组件说明
使用NavigatorIOS我们可以实现应用的导航（路由）功能，即实现视图之间的切换和前进、后退。并且在页面上方会有个导航栏（可以隐藏）。
NavigatorIOS组件本质上是对UIKitnavigation的包装。使用NavigatorIOS进行路由切换，实际上就是调用UIKit的navigation。
NavigatorIOS组件只支持iOS系统。ReactNative还提供了一个iOS和Android都通用导航组件：Navigator。这个以后再说。
2，组件的属性
（1）barTintColor：导航条的背景颜色
（2）initialRoute：用于初始化路由。其参数对象中的各个属性如下：
{
component:function,//加载的视图组件
title:string,//当前视图的标题
passPros:object,//传递的数据
backButtonIcon:Image.propTypes.source,//后退按钮图标
backButtonTitle:string,//后退按钮标题
leftButtonIcon:Image.propTypes.soruce,//左侧按钮图标
leftButtonTitle:string,//左侧按钮标题
onLeftButtonPress:function,//左侧按钮点击事件
rightButtonIcon:Image.propTypes.soruce,//右侧按钮图标
rightButtonTitle:string,//右侧按钮标题
onRightButtonPress:function,//右侧按钮点击事件
wrapperStyle:[objectObject]//包裹样式
}
（3）itemWrapperStyle：为每一项定制样式，比如设置每个页面的背景颜色。
（4）navigationBarHiddent：为true时隐藏导航栏。
（5）shadowHidden：为true时，隐藏阴影。
（6）tintColor：导航栏上按钮的颜色。
（7）titleTextColor：导航栏上字体的颜色。
（8）translucent：为true时，导航栏为半透明。
3，组件的方法
当组件视图切换的时候，navigator会作为一个属性对象被传递。我们可以通过this.props.navigator获得navigator对象。该对象的主要方法如下：
（1）pust(route)：加载一个新的页面（视图或者路由）并且路由到该页面。
（2）pop()：返回到上一个页面。
（3）popN(n)：一次性返回N个页面。当N=1时，相当于pop()方法的效果。
（4）replace(route)：替换当前的路由。
（5）replacePrevious（route）：替换前一个页面的视图并且回退过去。
（6）resetTo(route)：取代最顶层的路由并且回退过去。
（7）popToTop()：回到最上层视图。
二、使用样例
NavigatorIOS是ReactNative自带的导航组件，下面是它的简单应用。
初始化第一个场景
importPropTypesfrom'prop-types';
importReact,{Component}from'react';
import{NavigatorIOS,Text}from'react-native';
import{NextScene}from'react-native';
exportdefaultclassNavigatorIOSAppextendsComponent{
render(){
return(
CurrentScene:{this.props.title}
前往下一个场景
)
}
}
第二个场景
exportdefaultclassNextSceneextendsComponent{
render(){
return(
这是第二个场景
)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。