如何在React-native中动态添加和删除表行

在React Native中动态添加和删除表行可以通过以下步骤实现：

创建一个包含表格的组件，可以使用FlatList或ScrollView来实现表格布局。在组件的state中定义一个数组来存储表格的数据。
添加按钮或其他交互元素，用于触发添加表行的操作。当用户点击添加按钮时，调用一个函数来处理添加操作。
在添加操作的函数中，首先获取当前表格数据的副本，然后向副本中添加新的表行数据。可以使用数组的push方法或展开运算符来实现。
更新组件的state，将新的表格数据赋值给state中的数组。
在组件的render方法中，使用map函数遍历表格数据数组，为每个表行渲染一个对应的组件。可以使用View和Text等组件来展示表格数据。
添加删除按钮或其他交互元素，用于触发删除表行的操作。当用户点击删除按钮时，调用一个函数来处理删除操作。
在删除操作的函数中，首先获取当前表格数据的副本，然后根据需要删除的表行索引，使用数组的splice方法来删除对应的表行数据。
更新组件的state，将更新后的表格数据赋值给state中的数组。

以下是一个示例代码：

import React, { Component } from 'react';
import { View, Text, Button, FlatList } from 'react-native';

class DynamicTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [
        { id: 1, name: 'Row 1' },
        { id: 2, name: 'Row 2' },
        { id: 3, name: 'Row 3' }
      ]
    };
  }

  handleAddRow = () => {
    const { tableData } = this.state;
    const newRow = { id: tableData.length + 1, name: `Row ${tableData.length + 1}` };
    const newTableData = [...tableData, newRow];
    this.setState({ tableData: newTableData });
  }

  handleDeleteRow = (index) => {
    const { tableData } = this.state;
    const newTableData = [...tableData];
    newTableData.splice(index, 1);
    this.setState({ tableData: newTableData });
  }

  renderRow = ({ item, index }) => {
    return (
      <View key={item.id} style={{ flexDirection: 'row' }}>
        <Text>{item.name}</Text>
        <Button title="Delete" onPress={() => this.handleDeleteRow(index)} />
      </View>
    );
  }

  render() {
    const { tableData } = this.state;

    return (
      <View>
        <Button title="Add Row" onPress={this.handleAddRow} />
        <FlatList
          data={tableData}
          renderItem={this.renderRow}
          keyExtractor={(item) => item.id.toString()}
        />
      </View>
    );
  }
}

export default DynamicTable;

在上述示例中，我们使用FlatList组件来展示表格数据，并为每个表行添加了一个删除按钮。点击添加按钮会在表格末尾添加一行数据，点击删除按钮会删除对应的表行数据。