NavigatorIOS 是包裝了UIKit 庫(kù)的導(dǎo)航功能，使用戶(hù)可以使用左劃功能來(lái)返回到上一界面
NavigatorIOS 屬性
barTintColor： 導(dǎo)航欄背景顏色,只設(shè)置當(dāng)前界面的導(dǎo)航欄背景顏色
initialRoute() 使用“路由”對(duì)象來(lái)包含要渲染的子視圖美莫、它們的屬性、已經(jīng)導(dǎo)航條配置纸俭“扇ぃ“push”和任何其他的導(dǎo)航函數(shù)的參數(shù)都是這樣的路由對(duì)象（下面實(shí)例模塊會(huì)詳細(xì)講解）
initialRoute（{
component: function,
title: string,
passProps: object,
backButtonIcon: Image.propTypes.source,//返回按鈕的圖片
backButtonTitle: string,//返回按鈕的 title
leftButtonIcon: Image.propTypes.source,// 左按鈕圖片
leftButtonTitle: string,
onLeftButtonPress: function,
rightButtonIcon: Image.propTypes.source,
rightButtonTitle: string,
onRightButtonPress: function,
wrapperStyle: [object Object]//包裹樣式
})
itemWrapperStyle： 導(dǎo)航器中的組件的默認(rèn)屬性和悦。一個(gè)常見(jiàn)的用途是設(shè)置所有頁(yè)面的背景顏色
navigationBarHidden： 一個(gè)布爾值仁热，決定導(dǎo)航欄是否隱藏讼撒。
-
shadowHidden：布爾值，決定是否要隱藏1像素的陰影
1像素的陰影.png tintColor：導(dǎo)航欄上按鈕的顏色
titleTextColor：導(dǎo)航器標(biāo)題的文字顏色
translucent：布爾值股耽，決定導(dǎo)航條是否半透明(注：當(dāng)不半透明時(shí)頁(yè)面會(huì)向下移動(dòng)導(dǎo)航欄等高的距離,以防止內(nèi)容被遮蓋)
interactivePopGestureEnabled：決定是否啟用滑動(dòng)返回手勢(shì)。不指定此屬性時(shí)钳幅，手勢(shì)會(huì)根據(jù) navigationBar 的顯隱情況決定是否啟用（顯示時(shí)啟用手勢(shì)物蝙，隱藏時(shí)禁用手勢(shì)），指定此屬性后敢艰，手勢(shì)與 navigationBar 的顯隱情況無(wú)關(guān)
passProps: 父?jìng)鹘o子的對(duì)象
myProp
passProps: { myProp: 'temp 傳給 computer 的值' },
子類(lèi)調(diào)用:
alert(this.props.myProp);
NavigatorIOS 方法
push(route)：導(dǎo)航器跳轉(zhuǎn)到一個(gè)新的路由
pop()：回到上一頁(yè)
popN()：回到N頁(yè)之前诬乞。當(dāng) N=1 的時(shí)候，效果和 pop() 一樣,1是最近的一層,想要調(diào)到第 n層 就是N=n+1
replace(route)：替換當(dāng)前頁(yè)的路由钠导，并立即加載新路由的視圖
replacePrevious(route)：替換上一頁(yè)的路由/視圖
replacePreviousAndPop(route)替換上一頁(yè)的路由/視圖并且立即切換回上一頁(yè)
resetTO(route)：替換最頂級(jí)的路由并且回到它
replaceAtIndex：替換指定路由
popToRoute(route)：一直回到某個(gè)指定的路由
popToTop() 回到最頂層的路由
NavigatorIOS 使用
NavigatorIOS 需要有一個(gè)根視圖來(lái)完成初始化震嫉，所以我們需要先創(chuàng)建一個(gè)組件來(lái)描述這個(gè)界面，并將這個(gè)組件通過(guò)路由的形式告訴 NavigatorIOS牡属，這樣就可以將這個(gè)界面展示出來(lái)
代碼例子:
在index.ios.js內(nèi)獲得 Home 組件
import Home from './home';
class RNTalk extends Component {
render() {
return (
<Home />
);
}
}
// 整體js模塊的名稱(chēng)
AppRegistry.registerComponent('RNTalk', () => RNTalk);
home.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
NavigatorIOS,
} from 'react-native';
//導(dǎo)入子頁(yè)面
import Temp from './temp';
//導(dǎo)航欄 初始化NavigatorIOS 用 Home 作為 NavigatorIOS 的根視圖
class ReactNativeNavigator extends Component{
render (){
return(
<NavigatorIOS
style={{flex:1}} // 此項(xiàng)不設(shè)置,創(chuàng)建的導(dǎo)航控制器只能看見(jiàn)導(dǎo)航條而看不到界面
interactivePopGestureEnabled={true}//決定是否啟用滑動(dòng)返回手勢(shì)票堵。
itemWrapperStyle='blue'
translucent={true}//決定導(dǎo)航條是否半透明
initialRoute={{//初始化路由
component:Home,//路由的根視圖
title:'首頁(yè)',//標(biāo)題
}}/>
);
}
}
class Home extends Component{
//點(diǎn)擊跳轉(zhuǎn)
_onPressView (nextRoute){
//跳轉(zhuǎn) nextRoute 目的地的路由
this.props.navigator.push(nextRoute);
}
render() {
//目的地的路由屬性
const nextRoute = {
component:Temp,//目的地視圖
title:'詳情頁(yè)碼',//目的地標(biāo)題
titleTextColor:'red',//標(biāo)題顏色
shadowHidden:true,//決定是否要隱藏1像素的陰影
barTintColor:'white',//導(dǎo)航條的背景顏色
tintColor:'orange', // 按鈕的顏色
leftButtonTitle:'返回',//導(dǎo)航條的左按鈕
onLeftButtonPress:()=>{//導(dǎo)航條左按鈕觸發(fā)事件
alert('返回');
},
rightButtonTitle:'相冊(cè)',//導(dǎo)航條的右按鈕
onRightButtonPress:()=>{//導(dǎo)航條右按鈕觸發(fā)事件
alert('沒(méi)有該照片');
},
itemWrapperStyle:'green',//沒(méi)有效果 沒(méi)找到原因
passProps: { myProp: 'bar' }
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => {this._onPressView(nextRoute)}}>
<Text style={styles.textContainer}>點(diǎn)擊跳轉(zhuǎn)到 Temp 界面</Text>
</TouchableOpacity>
</View>
);
}
}
var styles = StyleSheet.create({
container:{
// 背景顏色
backgroundColor:'red',
flex:1,
justifyContent:'center',
alignItems:'center',
},
textContainer:{
fontSize:20,
}
});
module.exports = ReactNativeNavigator;
temp.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
TouchableOpacity
} from 'react-native';
import Computer from './computer';
class Temp extends Component{
_toComputerView(isShadowHidden){
this.props.navigator.push({
component:Computer,
title:'電腦詳情',
rightButtonTitle:'配置',
navigationBarHidden:isShadowHidden,// 隱藏導(dǎo)航欄
shadowHidden:true,//決定是否要隱藏1像素的陰影
onRightButtonPress:()=>{
alert('CUP i7');
},
passProps: { myProp: 'temp 傳給 computer 的值' },
});
}
render(){
return(
<View style={styles.container}>
<TouchableOpacity onPress={() => this._toComputerView(false)}>
<Text style={styles.textContainer}>電腦詳情(有導(dǎo)航欄)</Text>
</TouchableOpacity>
<Text/>
<TouchableOpacity onPress={() => this._toComputerView(true)}>
<Text style={styles.textContainer}>電腦詳情(無(wú)導(dǎo)航欄)</Text>
</TouchableOpacity>
<Text/>
<TouchableOpacity onPress={() => {this.props.navigator.pop()}}>
<Text style={styles.textContainer}>返回上一頁(yè)面</Text>
</TouchableOpacity>
</View>
);
}
}
var styles = StyleSheet.create({
container:{
// 背景顏色
backgroundColor:'white',
flex:1,
justifyContent:'center',
alignItems:'center',
},
textContainer:{
fontSize:20,
}
});
//相當(dāng)于將組件 Temp 公開(kāi)出 去將私有的變成共有
module.exports = Temp;
computer.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
TouchableOpacity
} from 'react-native';
class Computer extends Component{
_alertMyProp(){
alert(this.props.myProp);
}
render(){
return(
<View style={styles.container}>
<TouchableOpacity onPress={() => {this.props.navigator.pop()}}>
<Text style={styles.textContainer}>返回上一頁(yè)面</Text>
</TouchableOpacity>
<Text> </Text>
<TouchableOpacity onPress={() => {this.props.navigator.popN(2)}}>
<Text style={styles.textContainer}>返回首頁(yè)</Text>
</TouchableOpacity>
<Text> </Text>
<TouchableOpacity onPress={() => {this.props.navigator.popToTop()}}>
<Text style={styles.textContainer}>回到最頂層的路由</Text>
</TouchableOpacity>
<Text> </Text>
<TouchableOpacity onPress={() => {this._alertMyProp()}}>
<Text style={styles.textContainer}>展示傳值</Text>
</TouchableOpacity>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
backgroundColor:'yellow',
flex:1,
justifyContent:'center',
alignItems:'center'
},
textContainer:{
fontSize:20,
}
});
//相當(dāng)于將組件 Temp 公開(kāi)出 去將私有的變成共有
module.exports = Computer;
