JavaScript

超轻量级php框架startmvc

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

更新时间:2020-06-25 14:12:01 作者:startmvc
一、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>
 )
 }
}

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

React Native NavigatorIOS组件