StackNavigator
为你的应用程序提供一种在两屏幕之间切换的方法，每一个新的屏幕都会放在栈的顶部。
默认情况下，StackNavigator配置为具有熟悉的iOS和Android外观：iOS上的新屏幕从右侧滑出，从Android的底部渐入。在iOS上，StackNavigator也可以配置为modal样式，屏幕从底部滑入
例如：
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
}
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})}
title="Go to Lucy's profile"
/>
);
}
}
const ModalStack = StackNavigator({
Home: {
screen: MyHomeScreen,
},
Profile: {
path: 'people/:name',
screen: MyProfileScreen,
},
});
API
StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigs
路由配置和路由名称的一种映射，告诉navigator按照该路由要呈现什么
StackNavigator({
//Home界面route
Home:{
//require Homescreen就是一个react的组件(component)，用来展示的那个界面
screen:HomeScreen,//当HomeScreen加载完成后，他会得到一个navigation属性
//optional 当深层次关联或者在web app中使用React Navigation,使用路径
path:'people/:username',
//optional Override navigationOptions方法，对navigator做一些配置
navigationOptions:{
//设置个标题
title:({state}) => `${state.params.username}'s Profile'`
},
},
//我的其他路由，类似于上面这种定义模式的，供给navigator实现页面见得跳转
...MyOtherRoutes,
)}
StackNavigatorConfig
option for the route(路由选项):
initialRouteName：为stack设置默认的界面，必须和route configs里面的一个key匹配。
initialRouteParams： 初始路由的参数。
navigationOptions：屏幕导航的默认选项。
paths： routeconfig里面路径设置的映射。
Visual Option(视觉选项):
mode： 定义渲染(rendering)和转换(transitions)的模式,两种选项(给字符串即可)：
card：使用标准的iOS和Android的界面切换，这是默认的。
modal：仅在iOS端有用，即模态出该视图。
headerMode： 指定header应该如何被渲染,选项：
float： 共用一个header 意思就是有title文字渐变效果。ios常见模式
screen： 各用各的header 意思就是没有title文字渐变效果。Android常见模式
none： 没有header。
cardStyle： 使用该属性继承或者重载一个在stack中的card的样式。
onTransitionStart： 一个函数，在换场动画开始的时候被激活。
onTransitionEnd： 一个函数，在换场动画结束的时候被激活
Screen Navigation Options
通常你可以定义一个静态的navigationOptions在你的组件之上
title：string 可用作headerTitle、tabBarLabel
header:React element或一个给出HeaderProps参数、返回React element的函数，null则隐藏Header
headerTitle：string或者React element，默认是title的值，
headerBackTitle：iOS上的后退按钮使用的标题字符串，或禁用标签，默认为上一个scene的headerTtile
headerTruncatedBackTitle：当headerBackTtile不适应screen是使用，默认为'Back',
headerRight:React element,显示在header右侧，
headerLeft：React element，显示在header左侧，
headerStyle：header的样式，
headerTitleStyle：headerTitle的样式，
headerBackTitleStyle：headerBackTitle的样式，
headerTintColor：android上的返回icon可用此设置，
headerPressColorAndroid：material波纹颜色 Android>=5.0有效，
gesturesEnabled:是否可以使用手势关闭此屏幕。在iOS上默认为true，在Android上为false,
Navigator Props
通过StackNavigator()创建的导航组件可带有screenProps属性
例如：
const SomeStack = StackNavigator({
// config
});
<SomeStack
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
Ex
