一, 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>
)
}
}
来源: http://www.jb51.net/article/133815.htm