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

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

一、NavigatorIOS组件介绍

1，组件说明

使用 NavigatorIOS 我们可以实现应用的导航（路由）功能，即实现视图之间的切换和前进、后退。并且在页面上KDbcjx方会有个导航栏（可以隐藏）。

NavigatorIOS 组件本质上是对 UIKit navigation 的包装。使用 NavigatorIOS 进行路由切换，实际上就KDbcjx是调用 UIKit 的 navigation。

NavigatorIOS 组件只支持 iOS 系统。React Native 还提供了一个 iOS 和 android 都通用导航组件：Navigator。这个以后再说。

2，组件的属性

（http://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：为 http://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 (

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: '第二个场景'

KDbcjx});

}

render() {

return (

Current Scene: { this.props.title }

前往下一个场景

)

}

}

第二个场景

export default class NextScene extends Component {

render() {

return (

这是第二个场景

)

}

}

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: '第二个场景'

KDbcjx});

}

render() {

return (

Current Scene: { this.props.title }

前往下一个场景

)

}

}

第二个场景

export default class NextScene extends Component {

render() {

return (

这是第二个场景

)

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。