React Navigation - StackNavigato

为你的应用提供一种切换屏幕的方式，新创建的屏幕放置在栈顶。
默认情况下，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)

路径配置

路径配置对象为路径名到路径配置的映射，从而告诉navigator当前的路径下展示什么页面。

StackNavigator({

  // 每一个新页面都要创建一个这样的实体：
  Profile: {

    // `ProfileScreen` 是当前页面所要展示的React组件
    screen: ProfileScreen,
    // 当`ProfileScreen`被StackNavigator加载时, 他会被赋予一个`navigation`属性.

    // 可选: deeplink 或 web 应用中使用:
    path: 'people/:name',
    // The action and route params are extracted from the path.

    // 可选: 对当前页重写 `navigationOptions`
    navigationOptions: ({navigation}) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});

StackNavigatorConfig

可选的路由:

• initialRouteName - 设置堆栈中默认显示屏，必须是配置中的key.
• initialRouteParams - 初始页面参数
• navigationOptions - 默认navigation选项
• paths - 路由设置中的路径覆写的映射

可视选项:

• mode - 定义渲染和切换页面的风格:

  • card - 使用Android/IOS默认风格，默认选项。
  • modal - iOS从底部划入，Android无效。

• headerMode - 定义顶部栏如何显示:

  • float - 顶部固定渲染一个header，在切换时播放动画。这是iOS的通常模式。
  • screen - 每一屏都有一个header，在切换中跟随页面淡入淡出. 这是Android的通常模式。
  • none - 不显示header.

• cardStyle - 用来重写或扩展堆栈中的某一页面。

• transitionConfig - 定义方法返回一个对象来覆盖默认切屏动画。

• onTransitionStart - 切屏动画开始的回调。

• onTransitionEnd - 切屏动画结束的回调。

页面导航选项

title 作为headerTitle和tabBarLabel的备用字符串
header React 控件或方法给HeaderProps返回一个用来显示header的控件，设置为null时隐藏header。
headerTitle header的标题，字符串或控件，默认为场景标题。
headerBackTitle iOS回退键标题，为空时禁用标签。默认为场景标题。
headerTruncatedBackTitle 当headerBackTitle不适合屏幕时用来作为回退键的标题，默认为“Back”
headerRight显示在header右边的控件
headerLeft 显示在header左边的控件
headerStyle header的样式对象
headerTitleStyle header标题的样式对象
headerBackTitleStyle header回退键标题的样式对象
headerTintColor header的tint颜色
headerPressColorAndroid Android5.0以上按键按下的涟漪颜色
gesturesEnabled 是否可以使用手势关闭页面，默认iOS为true，Android为false。

Navigator 属性

navigator组件通过StackNavigator(...)获取一下属性：

• screenProps - 向下传递额外选项，例如：

const SomeStack = StackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

例子

See the examples SimpleStack.js and ModalStack.js which you can run locally as part of the NavigationPlayground app.
You can view these examples directly on your phone by visiting our expo demo.