多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
> 官网原话是这么说的: > Provides a way for your app to transition between screens where each new screen is placed on top of a stack. > 为你的app提供了这样一个功能:让你的app在不通屏幕之间切换,并且每一个新的屏幕都放在堆栈的最顶部。 通俗一点:其实就是切换屏幕啦! > 通过默认的 `StackNavigator` 将被配置为这样的感觉:在IOS上是从右边滑下,在Android上是通过底部淡出。在IOS上也可以配置为从底部淡出效果。 ~~~ 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 > `RouteConfigs` 对象是一个从路由名称到路由配置的映射。他告诉 `navigator` 应该为该路由提供什么。 ~~~ StackNavigator({ Profile: { screen: ProfileScreen, path: 'people/:name', navigationOptions: ({navigation}) => ({ title: `${navigation.state.params.name}'s Profile'`, }), }, ...MyOtherRoutes, }); ~~~ ### StackNavigatorConfig **Options for the router:** initialRouteName 设置堆栈的默认屏幕。必须匹配路线配置中的一个键。 initialRouteParams 初始化路由。 navigationOptions 设置默认导航选项。 paths 设置路径覆盖默认路径 --- **Visual options** `mode` 定义一个呈现的样式。 ----`card` :使用标准的iOS和Android屏幕过渡。这是默认的。 ----`modal` :让屏幕从底部滑动,这是一个常见的iOS模式。只在iOS上运行,对Android没有影响。 `headerMode `:如何展示头部标题 ----`float`: 当屏幕被改变时,呈现一个在顶部和动画的单个头部。这是iOS中常见的模式。 ----`screen` : 每一个屏幕都有一个头附在它上面,头和屏幕一起逐渐消失。这是Android上的常见模式。 ----`none `- 不会呈现头。 `cardStyle` :使用这个 prop 覆盖或者扩展堆栈中的单个卡片的默认样式。 transitionConfig - Function to return an object that overrides default screen transitions. onTransitionStart - Function to be invoked when the card transition animation is about to start. onTransitionEnd - Function to be invoked once the card transition animation completes. Screen Navigation Options