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