Question

我有一个数组的数据，这些数据在React-Native的平面列表中呈现。按下其中一项时，我希望它淡出，但是取而代之的是，平面列表中的所有项目都被赋予了动画效果，而不仅仅是我按下的一项。

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>
);
  }

Answer 1

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

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

Answer 2

您需要向组件添加另一个状态，例如indexToAnimate，并将其设置为null。

然后将一种条件设为<Animated.View>

<Animated.View
        key={index}
        style={[
          styles.animatedview,
          {
            opacity:
              index == this.state.indexToAnimate
                ? this.state.fadeAnim
                : "whatever your static value is..(in integer)"
          }
        ]}
/>

并在indexToAnimate的{{1}}方法上设置onPress状态

<TouchableOpacity>

如何为Flatlist中的单个项目制作动画

2 个答案: