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 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
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关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php 数组使用详解 推荐
2011/06/02 PHP
php导出excel格式数据问题
2014/03/11 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
会计专业的自荐信
2013/12/12 职场文书
国税会议欢迎词
2014/01/16 职场文书
庆元旦广播稿
2014/02/10 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
创业女性典型材料
2014/05/02 职场文书
中药学专业求职信
2014/05/31 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
团代会开幕词
2015/01/28 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书