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
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(
{this._onPressView(nextRoute)}}>
点击跳转到 Temp 界面
);
}
}
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(
this._toComputerView(false)}>
电脑详情(有导航栏)
this._toComputerView(true)}>
电脑详情(无导航栏)
{this.props.navigator.pop()}}>
返回上一页面
);
}
}
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(
{this.props.navigator.pop()}}>
返回上一页面
{this.props.navigator.popN(2)}}>
返回首页
{this.props.navigator.popToTop()}}>
回到最顶层的路由
{this._alertMyProp()}}>
展示传值
);
}
}
var styles = StyleSheet.create({
container: {
backgroundColor:'yellow',
flex:1,
justifyContent:'center',
alignItems:'center'
},
textContainer:{
fontSize:20,
}
});
//相当于将组件 Temp 公开出 去将私有的变成共有
module.exports = Computer;