Question

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

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

我认为它来自SlideMenu布局的动画，但只有当它触发“片段”的更改时才会发生。（点击内容视图）点击其中的项目。否则菜单会正常关闭。

点击＆＃34;解雇＆＃34;我的片段显示得很好，但我没有看到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>
    );
  }

按菜单中的项目会触发关闭菜单（并将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);
}

Answer 1

在Github here上被问及有人回答我：

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

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

React-Native不支持的布局动画

1 个答案: