React-Native 不支持的布局动画

Posted

技术标签:

【中文标题】React-Native 不支持的布局动画【英文标题】:React-Native Unsupported Layout Animation 【发布时间】:2015-05-04 13:51:02 【问题描述】:

尝试渲染我的场景,其中包含一个 SlideMenu,其中每个项目都会更改我的内容视图,我收到了该错误:

[RCTLog][tid:0x7f8f7054b4b0]
[RCTUIManager.m:466]>Unsupported layout animation createConfig property (null)

我想它来自 SlideMenu 布局的动画,但仅在单击其中的项目时触发“片段”(即内容视图)的更改时才会发生。否则菜单会正常关闭。

单击“关闭”时,我的片段显示良好,但我没有看到 SlideMenu 关闭。

我不知道这是来自动画本身还是元素的变化和动画的结合。

这是我的一些代码:

toggleSlideMenu: function() 
  if (this.state.slideMenuIsAccessible)
    if(this.state.menuIsOpen) 
      //close Menu
     else 
      //open Menu
    
    queueAnimation(this.props.animation);
    this.center.setNativeProps(left: this.offset); //updates UI
  
);

片段选择发生在 generalTemplate 中:

  matchIdToFragment: function(fragmentId) 
    switch (fragmentId) 
      case 'suggestions':
        return <Suggestions />;
      case 'onScreen':
        return <OnScreen />;
      case 'zap':
        return <Zap setFragmentId=this.props.setFragmentId setItemId=this.setItemId/>;
      case 'programDetails':
        return <ProgramDetails itemId=this.state.itemId/> ;
    
  ,
  render: function() 
    var fragment = this.matchIdToFragment(this.props.fragmentId);

    return (
      <View style=styles.container>
        <View style=styles.fragmentView>
          fragment
        </View>
        <NavigationBar 
          onOpenUserMenu=this.onOpenUserMenu
          toggleSlideMenu=this.toggleSlideMenu/>   
      </View>
    );
  

在菜单中按下 item 会触发菜单的关闭(并将此处未出现的 ID 传输到 generalTemplate :

var Section = React.createClass(
  onPress: function() 
    this.props.toggleSlideMenu();
  ,
  render: function() 
    return (
      <TouchableHighlight underlayColor='#DFDFDF' onPress=this.onPress>
        //Name and icon of the menu item  
      </TouchableHighlight>
    );
  
);

以及动画的代码(不确定它是否有用,但我们永远不知道):

var LayoutAnimation = require('react-native').LayoutAnimation;
var DEFAULT_ANIMATION = 'linear';

var animations = 
  layout: 
    linear: 
      duration: 300,
      create: 
        type: LayoutAnimation.Types.linear,
      ,
      update: 
        type: LayoutAnimation.Types.linear,
        springDamping: 0.7,
      ,
    ,
  ,
;

var layoutAnimationConfigs = 
  'spring': animations.layout.spring,
;

module.exports = function(animation) 
  var _animation = layoutAnimationConfigs[animation];
  if (!_animation) 
    _animation = layoutAnimationConfigs[DEFAULT_ANIMATION];
  

  LayoutAnimation.configureNext(_animation);

【问题讨论】:

【参考方案1】:

在 Github here 上询问,有人回答我:

我在动画定义的创建部分中缺少一个属性:

create: 
    type: LayoutAnimation.Types.linear,
    property: LayoutAnimation.Properties.opacity,
,

【讨论】:

以上是关于React-Native 不支持的布局动画的主要内容,如果未能解决你的问题,请参考以下文章

*只有一个*动画块(UILabel)使用自动布局的问题

flex布局构建大屏框架并支持翻页动画滚动表格功能

底部工作表的动画布局更改

Android Studio 中相对布局的动画

自动布局弄乱了我的动画

带有布局约束和 NSAnimationContext 的动画不正确