NavigatorIOS 是包装了UIKit 库的导航功能，使用户可以使用左划功能来返回到上一界面
NavigatorIOS 属性
barTintColor： 导航栏背景颜色,只设置当前界面的导航栏背景颜色
initialRoute() 使用“路由”对象来包含要渲染的子视图、它们的属性、已经导航条配置。“push”和任何其他的导航函数的参数都是这样的路由对象（下面实例模块会详细讲解）
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： 导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色
navigationBarHidden： 一个布尔值，决定导航栏是否隐藏。
-
shadowHidden：布尔值，决定是否要隐藏1像素的阴影
1像素的阴影.png tintColor：导航栏上按钮的颜色
titleTextColor：导航器标题的文字颜色
translucent：布尔值，决定导航条是否半透明(注：当不半透明时页面会向下移动导航栏等高的距离,以防止内容被遮盖)
interactivePopGestureEnabled：决定是否启用滑动返回手势。不指定此属性时，手势会根据 navigationBar 的显隐情况决定是否启用（显示时启用手势，隐藏时禁用手势），指定此属性后，手势与 navigationBar 的显隐情况无关
passProps: 父传给子的对象
myProp
passProps: { myProp: 'temp 传给 computer 的值' },
子类调用:
alert(this.props.myProp);
NavigatorIOS 方法
push(route)：导航器跳转到一个新的路由
pop()：回到上一页
popN()：回到N页之前。当 N=1 的时候，效果和 pop() 一样,1是最近的一层,想要调到第 n层 就是N=n+1
replace(route)：替换当前页的路由，并立即加载新路由的视图
replacePrevious(route)：替换上一页的路由/视图
replacePreviousAndPop(route)替换上一页的路由/视图并且立即切换回上一页
resetTO(route)：替换最顶级的路由并且回到它
replaceAtIndex：替换指定路由
popToRoute(route)：一直回到某个指定的路由
popToTop() 回到最顶层的路由
NavigatorIOS 使用
NavigatorIOS 需要有一个根视图来完成初始化，所以我们需要先创建一个组件来描述这个界面，并将这个组件通过路由的形式告诉 NavigatorIOS，这样就可以将这个界面展示出来
代码例子:
在index.ios.js内获得 Home 组件
import Home from './home';
class RNTalk extends Component {
render() {
return (
<Home />
);
}
}
// 整体js模块的名称
AppRegistry.registerComponent('RNTalk', () => RNTalk);
home.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
NavigatorIOS,
} from 'react-native';
//导入子页面
import Temp from './temp';
//导航栏 初始化NavigatorIOS 用 Home 作为 NavigatorIOS 的根视图
class ReactNativeNavigator extends Component{
render (){
return(
<NavigatorIOS
style={{flex:1}} // 此项不设置,创建的导航控制器只能看见导航条而看不到界面
interactivePopGestureEnabled={true}//决定是否启用滑动返回手势。
itemWrapperStyle='blue'
translucent={true}//决定导航条是否半透明
initialRoute={{//初始化路由
component:Home,//路由的根视图
title:'首页',//标题
}}/>
);
}
}
class Home extends Component{
//点击跳转
_onPressView (nextRoute){
//跳转 nextRoute 目的地的路由
this.props.navigator.push(nextRoute);
}
render() {
//目的地的路由属性
const nextRoute = {
component:Temp,//目的地视图
title:'详情页码',//目的地标题
titleTextColor:'red',//标题颜色
shadowHidden:true,//决定是否要隐藏1像素的阴影
barTintColor:'white',//导航条的背景颜色
tintColor:'orange', // 按钮的颜色
leftButtonTitle:'返回',//导航条的左按钮
onLeftButtonPress:()=>{//导航条左按钮触发事件
alert('返回');
},
rightButtonTitle:'相册',//导航条的右按钮
onRightButtonPress:()=>{//导航条右按钮触发事件
alert('没有该照片');
},
itemWrapperStyle:'green',//没有效果 没找到原因
passProps: { myProp: 'bar' }
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => {this._onPressView(nextRoute)}}>
<Text style={styles.textContainer}>点击跳转到 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,// 隐藏导航栏
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}>电脑详情(有导航栏)</Text>
</TouchableOpacity>
<Text/>
<TouchableOpacity onPress={() => this._toComputerView(true)}>
<Text style={styles.textContainer}>电脑详情(无导航栏)</Text>
</TouchableOpacity>
<Text/>
<TouchableOpacity onPress={() => {this.props.navigator.pop()}}>
<Text style={styles.textContainer}>返回上一页面</Text>
</TouchableOpacity>
</View>
);
}
}
var styles = StyleSheet.create({
container:{
// 背景颜色
backgroundColor:'white',
flex:1,
justifyContent:'center',
alignItems:'center',
},
textContainer:{
fontSize:20,
}
});
//相当于将组件 Temp 公开出 去将私有的变成共有
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}>返回上一页面</Text>
</TouchableOpacity>
<Text> </Text>
<TouchableOpacity onPress={() => {this.props.navigator.popN(2)}}>
<Text style={styles.textContainer}>返回首页</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,
}
});
//相当于将组件 Temp 公开出 去将私有的变成共有
module.exports = Computer;
