美文网首页
Navigator组件中使用不同的弹入效果

Navigator组件中使用不同的弹入效果

作者: NextStack | 来源:发表于2016-08-21 01:13 被阅读0次

在初始化Navigator的时候,一般会设置configureScene属性用于设定组件的弹入效果,比如从底往上,从右往左。。

一般我们这么写:

<Navigator
  initialRoute={{
    name: 'Home',
    component: Home,
    params: {}
  }}
  configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
  renderScene={(route, navigator) => {
    let Cmp = route.component;
    return <Cmp {...route.params} navigator={navigator} />;
  }} />

但是我们可能有多个组件,如果每个组件都是同一个弹入方式,那也太无聊了,所以我们应该设置多个不同的弹入方式:

configureScene={(route, routeStack) => {
  const configs = Navigator.SceneConfigs;
  switch(route.name) {
    case 'SecondPage':
      return configs.FloatFromBottom;
    default:
      return configs.FloatFromRight;
  }
}}

原理:在configureScene配置中判断routename属性,判断要推入的页面,最后返回不同的弹入方式。

相关文章

网友评论

      本文标题:Navigator组件中使用不同的弹入效果

      本文链接:https://www.haomeiwen.com/subject/ssgisttx.html