React Native运行时如何动态添加和删除View等组件？

核心实现逻辑 #

React Native 是声明式 UI 框架，和原生 JavaScript 命令式操作 DOM 的思路完全不同，你不需要手动查找节点、增删组件，只需要维护描述组件列表的状态，状态变更后框架会自动更新 UI 匹配最新的状态，完全可以实现你要的动态增删效果。

具体实现示例 #

你之前写的固定数量渲染的思路是对的，只要把固定的数组换成你自己维护的响应式状态即可，完整示例如下：

import { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

export default function DynamicComponentDemo() {
  // 状态存储要渲染的组件列表，每个元素绑定唯一id方便后续操作
  const [compList, setCompList] = useState([]);
  // 演示用的自增id，实际项目可替换为uuid等生成唯一值的方案
  let idSeq = 0;

  // 添加元素逻辑
  const addNewElement = () => {
    const newItem = {
      id: ++idSeq,
      content: `我是新增的第 ${idSeq} 个元素`
    };
    // 不可变更新：返回新数组，不要直接修改原状态数组
    setCompList(prev => [...prev, newItem]);
  };

  // 删除元素逻辑
  const deleteElement = (targetId) => {
    setCompList(prev => prev.filter(item => item.id !== targetId));
  };

  return (
    <View style={styles.container}>
      <Pressable style={styles.addBtn} onPress={addNewElement}>
        <Text style={styles.btnText}>点击添加元素</Text>
      </Pressable>

      {/* 遍历状态数组动态渲染所有元素 */}
      <View style={styles.listWrap}>
        {compList.map(item => (
          <View key={item.id} style={styles.item}>
            <Text>{item.content}</Text>
            <Pressable 
              style={styles.delBtn}
              onPress={() => deleteElement(item.id)}
            >
              <Text style={styles.delText}>删除</Text>
            </Pressable>
          </View>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    flex: 1,
  },
  addBtn: {
    padding: 12,
    backgroundColor: '#2196F3',
    borderRadius: 4,
    marginBottom: 16,
  },
  btnText: {
    color: '#fff',
    textAlign: 'center',
  },
  listWrap: {
    gap: 12,
  },
  item: {
    padding: 12,
    borderWidth: 1,
    borderColor: '#eee',
    borderRadius: 4,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  delBtn: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    backgroundColor: '#ff4444',
    borderRadius: 4,
  },
  delText: {
    color: '#fff',
    fontSize: 12,
  }
});

注意事项 #

• 必须给遍历渲染的组件加唯一且稳定的key属性，不要用数组下标当key，尤其是列表存在增删、排序操作时，用下标当key会导致渲染错乱、组件状态异常，优先用每个元素独有的id作为key。
• 更新状态必须使用不可变写法，不要直接修改原状态数组（比如直接对compList调用push、pop、splice等方法后直接赋值），必须返回一个全新的数组，React才会检测到状态变化触发重渲染。
• 如果要修改某个已渲染的元素内容，也是直接修改compList中对应项的配置，再用不可变写法更新状态即可，框架会自动更新对应组件。

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