React-Navigation StackNavigator

官网原话是这么说的:
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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容