Javascript 如何从平面列表中设置单个项目的动画

我有一个数据数组，我在React Native的flatlist中呈现。按下其中一个项目时，我希望它淡出，但平面列表上的所有项目都会设置动画，而不仅仅是我按下的项目

constructor(props){ 
super(props); 
this.state = { fadeAnim: new Animated.Value(1) }



  onPressButtonnotdelivered(item) {
    //Alert.alert(item.name)
      const animations = [
        Animated.timing(this.state.fadeAnim, {
          toValue: 0,
          duration: 500
        }),

      ];

      Animated.sequence(animations).start()
  }


  render() {
return (
  <View>
    <FlatList
      data={this.state.data}
      extraData={this.state}
      keyExtractor={item => item.id}
      renderItem={({ item, index }) => {
        return (
          <Animated.View key={index} style={[styles.animatedview, {opacity: this.state.fadeAnim}]}>
    <View>
    <View style={[styles.button, {backgroundColor: '#E94F64'}]}>
    <TouchableOpacity style={styles.buttonview}
    onPress={() => {this.onPressButtonnotdelivered(item)}}>
  <View style={styles.btnIcon}>
  <Icon name="block" size={30} />
    <Text>Not delivered</Text>
  </View>
</TouchableOpacity>
</View>
          </View>
          </Animated.View>
        );
      }}
    />
  </View>
);
  }

constructor（props）{
超级（道具）；
this.state={fadeAnim:new Animated.Value（1）}
OnPress按钮未交付（项目）{
//Alert.Alert（项目名称）
常量动画=[
动画。计时（this.state.fadeAnim{
toValue:0，
持续时间：500
}),
];
Animated.sequence（animations.start（））
}
render（）{
返回(
项目id}
renderItem={（{item，index}）=>{
返回(
{this.onpressButton（项目）}>
未交付
);
}}
/>
);
}

如果将条件渲染添加到renderItem，如：

renderItem={({ item, index }) => {
    if (index === 'id') 
      return(<Animated.View> ... </Animated.View>);
    else
      return(<View> ... </View>);
 }

renderItem={（{item，index}）=>{
如果（索引=='id'）
回报率（…）；
其他的
回报率（…）；
}

如果将条件渲染添加到renderItem，如：

renderItem={({ item, index }) => {
    if (index === 'id') 
      return(<Animated.View> ... </Animated.View>);
    else
      return(<View> ... </View>);
 }

renderItem={（{item，index}）=>{
如果（索引=='id'）
回报率（…）；
其他的
回报率（…）；
}

您需要向组件添加一个状态，比如

indexToAnimate

，并将其设置为

null

然后以

---

您需要向组件添加一个状态，比如

indexToAnimate

，并将其设置为

null

然后以

---

我不确定我的问题是否足够清楚。我需要所有视图块都设置动画，但当我单击一个按钮时，我希望只有该视图块淡出，当我单击另一个按钮时，该视图也会淡出。现在，所有视图块都会一次淡出，无论我单击哪个视图块按钮，这可能是一个好的starting point。这是一个实现滑动删除的教程。您必须将滑动更改为触控，并稍微调整删除动画。谢谢，我会看一看。我不确定我的问题是否足够清楚。我需要所有视图块都设置动画，但当我单击按钮时，我希望只有该视图块淡出，并且单击另一个按钮，其他视图也会淡出。现在所有视图块都会一次淡出，无论我单击哪个视图块按钮，这可能是一个很好的起点。这是一个实现滑动删除的教程。您必须将滑动更改为触摸，并稍微调整删除动画。谢谢，我将看一看它可能重复的可能重复的可能重复的感谢你的帮助，这几乎解决了我的问题。现在，当我点击按钮时，只有一个视图淡出，但当我从另一个视图点击另一个按钮时，上一个按下的视图再次显示，新按下的视图淡出。我需要的是，当按钮被预先按下时它会消失，不再出现，有什么想法吗？那是因为你没有从传递给flatlist的状态中删除你的项目。当你单击view时删除该项目。谢谢你，我使用了：

let data=this.state.data.filter（cust=>cust.id！==item.id）this.setState（{data:data}）

在动画结束后删除视图！感谢您的帮助，这几乎解决了我的问题。现在，当我单击按钮时，只有一个视图会淡出，但当我从另一个视图单击另一个按钮时，上一个按下的视图会再次显示，而新按下的视图会淡出。我需要的是，当按下按钮时，它会消失淡出并不再显示，有什么想法吗？那是因为你没有从传递给flatlist的状态中删除你的项目。单击view时删除该项目。谢谢你，dude，我使用了：

let data=this.state.data.filter（cust=>cust.id！==item.id）this.setState（{data:data}）

在动画结束后删除视图！

<TouchableOpacity
  style={styles.buttonview}
  onPress={() => {
    this.setState({ indexToAnimate: index }, () => this.onPressButtonnotdelivered(item));
  }}
>
  <View style={styles.btnIcon}>
    <Icon name="block" size={30} />
    <Text>Not delivered</Text>
  </View>
</TouchableOpacity>