如何改进React Native代码以移除动态添加的View组件？

看起来你已经搞定了动态添加View的功能，现在要实现移除的话，咱们可以从几个方面优化代码，同时补全移除逻辑，顺便修复一些小问题让整体更健壮：

关键改进点 #

• 新增移除函数，通过过滤数组实现删除指定组件
• 修正Button组件的正确用法（通过title属性设置文字，无需嵌套Text）
• 给每个Remove按钮绑定对应的移除事件
• 将index移到state中管理，符合React状态规范
• 使用item的唯一标识作为组件key，避免不必要的重渲染

完整改进代码 #

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Animated, ScrollView, Image, Button } from 'react-native';

export default class App extends Component<{}> {
  constructor() {
    super();
    this.state = { 
      valueArray: [], 
      disabled: false,
      index: 0 // 将index移到state中管理
    }
    this.animatedValue = new Animated.Value(0);
  }

  addMore = () => {
    this.animatedValue.setValue(0);
    this.setState(prevState => ({
      disabled: true,
      // 基于prevState生成新数组，避免state更新的异步问题
      valueArray: [...prevState.valueArray, { index: prevState.index }]
    }), () => {
      Animated.timing(
        this.animatedValue,
        { toValue: 1, duration: 500, useNativeDriver: true }
      ).start(() => {
        // 动画完成后更新index
        this.setState(prevState => ({
          disabled: false,
          index: prevState.index + 1
        }));
      });
    });
  }

  // 新增移除函数：根据item的index过滤数组
  removeItem = (itemIndex) => {
    this.setState(prevState => ({
      valueArray: prevState.valueArray.filter(item => item.index !== itemIndex)
    }));
  }

  render() {
    const animationValue = this.animatedValue.interpolate({
      inputRange: [0, 1], 
      outputRange: [-59, 0]
    });

    const renderItems = this.state.valueArray.map((item) => {
      // 判断是否是刚添加的元素，应用动画
      const isNewItem = item.index === this.state.index - 1;
      return (
        <Animated.View 
          key={item.index} // 使用item的唯一index作为key，避免索引变化导致的重渲染
          style={[
            styles.viewHolder, 
            isNewItem ? { 
              opacity: this.animatedValue, 
              transform: [{ translateY: animationValue }] 
            } : {}
          ]}
        >
          <Text style={styles.text}>Row {item.index}</Text>
          {/* 修正Button用法，绑定移除事件 */}
          <Button 
            title="Remove" 
            onPress={() => this.removeItem(item.index)} 
          />
        </Animated.View>
      );
    });

    return(
      <View style={styles.container}>
        <ScrollView contentContainerStyle={styles.scrollViewStyle}>
          <View style={{ flex: 1, padding: 4 }}>
            {renderItems}
          </View>
        </ScrollView>
        <TouchableOpacity 
          activeOpacity={0.8} 
          style={styles.btn} 
          disabled={this.state.disabled} 
          onPress={this.addMore}
        >
          <Image source={require('./assets/add.png')} style={styles.btnImage}/>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
  },
  viewHolder: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    marginVertical: 8,
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
  },
  text: {
    fontSize: 16,
  },
  btn: {
    position: 'absolute',
    bottom: 20,
    right: 20,
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnImage: {
    width: 30,
    height: 30,
    tintColor: '#fff',
  },
  scrollViewStyle: {
    paddingBottom: 80, // 给底部按钮留出空间
  }
});

代码解释 #

1. 移除逻辑实现：removeItem函数通过filter方法筛选出不等于目标itemIndex的元素，更新state中的valueArray，React会自动重新渲染列表，移除对应的View。
2. Button组件修正：React Native的Button组件是内置组件，直接通过title属性设置按钮文字，不需要嵌套Text组件，否则会导致按钮无法正常响应点击或文字不显示。
3. 状态管理优化：把原来的实例属性index移到state中，避免因组件重新渲染导致的状态不一致问题，同时在更新state时使用prevState参数，处理state更新的异步特性。
4. 动画逻辑优化：通过判断item.index是否等于最新的state.index - 1，来识别刚添加的元素，给它应用入场动画，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Fire Hand