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


Posted in Javascript onJanuary 27, 2018

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

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

Javascript 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
初识javascript 文档碎片
Jul 13 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 #Javascript
使用D3.js创建物流地图的示例代码
Jan 27 #Javascript
javascript获取图片的top N主色值方法详解
Jan 26 #Javascript
Vue中render方法的使用详解
Jan 26 #Javascript
Angular利用trackBy提升性能的方法
Jan 26 #Javascript
微信小程序版翻牌小游戏
Jan 26 #Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 #Javascript
You might like
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
js href的用法
2010/05/13 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python障碍式期权定价公式
2019/07/19 Python
通过实例解析python and和or使用方法
2020/11/14 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
失恋33天观后感
2015/06/11 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
python游戏开发之pygame实现接球小游戏
2022/04/22 Python