美文网首页
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