NavigatorIOS包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。
常用的导航器方法：
push(route)导航器跳转到一个新的路由。
pop()回到上一页。
popN(n)回到N页之前。当N=1的时候，效果和 pop() 一样。
replace(route)替换当前页的路由，并立即加载新路由的视图。
replacePrevious(route)替换上一页的路由/视图。
replacePreviousAndPop(route)替换上一页的路由/视图并且立刻切换回上一页。resetTo(route)替换最顶级的路由并且回到它。
popToRoute(route)一直回到某个指定的路由。
popToTop()回到最顶层的路由。
常用属性：
barTintColor string 导航条的背景颜色。
initialRoute {
component: function,// 路由到对应的版块
title: string,// 标题
passProps:object,// 传递的参数
backButtonIcon: Image.propTypes.source,// 返回按钮
backButtonTitle: string,// 返回按钮标题
leftButtonIcon:Image.propTypes.source,
leftButtonTitle: string,
onLeftButtonPress: function,
rightButtonIcon: Image.propTypes.source,
rightButtonTitle: string,
onRightButtonPress: function,
wrapperStyle: [objectObject]
}
NavigatorIOS使用"路由"对象来包含要渲染的子视图、它们的属性、以及导航条配置。"push"和任何其它的导航函数的参数都是这样的路由对象。
栗子：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Alert,
Image,
TouchableHighlight,
TouchableOpacity,
NavigatorIOS,
ScrollView
} from 'react-native';
//导航栏
class ReactNativeProject extends Component {
render() {
return ();
}
}
//列表页面
class ListPage extends Component {
render(){
return (订单1详情订单2详情订单3详情);
}
_goToDetailPage(){
this.props.navigator.push({
component: DetailPage,
title: '订单详情',
rightButtonTitle: '购物车',
onRightButtonPress: function(){
alert('进入我的购物车');
}
});
}
}
//详情页
class DetailPage extends Component {
_show(text) {
alert(text);
}
_handleBackButtonPress() {
this.props.navigator.pop();
}
render() {
return (
activeOpacity={0.5}>React Native返回上一级页面);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:64
},
item:
{
fontSize:18,
marginLeft:5,
color:'#434343'
},
flex:{
flex: 1,
},
list_item:{
lineHeight:25,
fontSize:16,
marginLeft:10,
marginRight:10
}
});
AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);
效果图：
效果图
网友评论