一、navigatorios组件介绍
1，组件说明
使用 navigatorios 我们可以实现应用的导航（路由）功能，即实现视图之间的切换和前进、后退。并且在页面上方会有个导航栏（可以隐藏）。
navigatorios 组件本质上是对 uikit navigation 的包装。使用 navigatorios 进行路由切换，实际上就是调用 uikit 的 navigation。
navigatorios 组件只支持 ios 系统。react native 还提供了一个 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: [object object] //包裹样式
}
（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是react native自带的导航组件，下面是它的简单应用。
初始化第一个场景
import proptypes from 'prop-types';
import react, { component } from 'react';
import { navigatorios, text } from 'react-native';
import { nextscene } from 'react-native';
export default class navigatoriosapp extends component {
render() {
return (
<navigatorios
initialroute={{
component: myscene,
title: '初始化第一个场景',
}}
style={{flex: 1}}
/>
);
}
}
class myscene extends component {
static proptypes = {
title: proptypes.string.isrequired,
navigator: proptypes.object.isrequired,
}
_onforward = () => {
this.props.navigator.push({
component:nextscene
title: '第二个场景'
});
}
render() {
return (
<view>
<text>current scene: { this.props.title }</text>
<touchablehighlight onpress={this._onforward}>
<text>前往下一个场景</text>
</touchablehighlight>
</view>
)
}
}
第二个场景
export default class nextscene extends component {
render() {
return (
<view>
<text>这是第二个场景</text>
</view>
)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论