时间戳

首页 > 解决方案 > 当用户从平面数据列表中单击一个动画组件时，对它进行动画处理

javascript - 当用户从平面数据列表中单击一个动画组件时，对它进行动画处理

问题描述

嗨所以我有一个平面列表，它创建一个特定列表，每个列表上都有一个按钮。当用户点击一个按钮时，用户点击的那个按钮应该有动画。到目前为止，我只能为平面列表中的所有按钮设置动画，而不仅仅是我需要的那个。有什么建议么？到目前为止，这是我的实现示例。不要担心拼写太多，我更担心逻辑。多谢你们！

  renderAnimation(post, index, item) {
     return (
       <View>
         <TouchableOpacity onPress={() => {
             this.setState({ likesButton: true })
         }}>
      <Animatable.Image
      animation={this.state.likesButton ? "bounce" : null}
      duration={3000}
    />
         </TouchableOpacity>
       </View>
     );
   }

<Flatlist 
dataSource={this.state.data}
renderItem={({item, index}) => { 
<View>
{this.renderAnimation()}
</View>
}}
/>

因此，当用户单击一个按钮时，这会为列表上的所有按钮设置动画。但我只想要一个按钮来动画用户点击，而不是全部

标签： javascriptreactjsanimationreact-native

解决方案

所以我能够通过做一些hacky来解决这个问题。我基本上使用渲染所有项目的平面列表进行动画处理，然后我在平面列表中的所有其他未选择的项目上渲染为 null，然后我再次重新渲染这些项目以给出只有一个选定项目与动画一起渲染的外观。

推荐阅读