欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React Native中NavigatorIOS组件的简单使用详解

程序员文章站 2022-07-04 19:50:00
一、navigatorios组件介绍 1,组件说明 使用 navigatorios 我们可以实现应用的导航(路由)功能,即实现视图之间的切换和前进、后退。并且在...

一、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>
  )
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。