Анимация одного анимированного компонента, когда пользователь нажимает на него из плоского списка данных

Question

Привет, поэтому у меня есть плоский список, который создает определенный список с кнопкой в ​​каждом списке. Когда пользователь нажимает кнопку, эта кнопка, которую нажимает пользователь, должна анимироваться. На данный момент я могу анимировать только все кнопки в плоском списке, а не только ту, которая мне нужна. Какие-либо предложения? вот мой пример реализации до сих пор. не беспокойся о написании слишком много, я больше беспокоюсь о логике. Спасибо, парни!

  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>
}}
/>

, так что анимируются все кнопки в списке, когда пользователь нажимает на одну из них. но я просто хочу, чтобы эта кнопка для анимации нажимала пользователь, а не все

Answer 1

так что я смог решить это, сделав что-то хакерское. Я в основном анимирую, используя плоский список, который рендерит все элементы, затем я рендерил ноль для всех остальных, не выбранных элементов в плоский список, а затем снова переопределяю эти элементы, чтобы создать видимость, что только один выбранный элемент был визуализирован с анимацией.