NavigatorIOS包裝了UIKit的導(dǎo)航功能怯伊，可以使用左劃功能來返回到上一界面府蔗。
常用的導(dǎo)航器方法：
push(route)導(dǎo)航器跳轉(zhuǎn)到一個(gè)新的路由棺滞。
pop()回到上一頁咽瓷。
popN(n)回到N頁之前串塑。當(dāng)N=1的時(shí)候，效果和 pop() 一樣娃承。
replace(route)替換當(dāng)前頁的路由奏夫，并立即加載新路由的視圖。
replacePrevious(route)替換上一頁的路由/視圖历筝。
replacePreviousAndPop(route)替換上一頁的路由/視圖并且立刻切換回上一頁酗昼。resetTo(route)替換最頂級的路由并且回到它。
popToRoute(route)一直回到某個(gè)指定的路由梳猪。
popToTop()回到最頂層的路由麻削。
常用屬性：
barTintColor string 導(dǎo)航條的背景顏色。
initialRoute {
? ? ? ?component: function,// 路由到對應(yīng)的版塊
? ? ? ?title: string,// 標(biāo)題
? ? ? ?passProps:object,// 傳遞的參數(shù)
? ? ? ?backButtonIcon: Image.propTypes.source,// 返回按鈕
? ? ? ?backButtonTitle: string,// 返回按鈕標(biāo)題
? ? ? ?leftButtonIcon:Image.propTypes.source,
? ? ? ?leftButtonTitle: string,
? ? ? ?onLeftButtonPress: function,
? ? ? ?rightButtonIcon: Image.propTypes.source,
? ? ? ?rightButtonTitle: string,
? ? ? onRightButtonPress: function,
? ? ? wrapperStyle: [objectObject]
}
?NavigatorIOS使用"路由"對象來包含要渲染的子視圖春弥、它們的屬性呛哟、以及導(dǎo)航條配置。"push"和任何其它的導(dǎo)航函數(shù)的參數(shù)都是這樣的路由對象匿沛。 ? ?
栗子：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Alert,
Image,
TouchableHighlight,
TouchableOpacity,
NavigatorIOS,
ScrollView
} from 'react-native';
//導(dǎo)航欄
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('進(jìn)入我的購物車');
}
});
}
}
//詳情頁
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);
效果圖：
