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 不支持的布局动画的主要内容,如果未能解决你的问题,请参考以下文章