在不呈现整个列表的情况下在Listview中追加新项- React Native/ React js

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

class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    // 初始数据数组
    const initialData = [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
    ];
    
    // 创建ListView的数据源
    const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    
    this.state = {
      data: initialData,
      dataSource: dataSource.cloneWithRows(initialData),
    };
  }
  
  // 追加新项
  appendNewItem = () => {
    const newItem = { id: 4, name: 'Item 4' };
    
    // 更新数据数组
    const newData = [...this.state.data, newItem];
    
    // 更新数据源
    this.setState({
      data: newData,
      dataSource: this.state.dataSource.cloneWithRows(newData),
    });
  }
  
  renderRow = (rowData) => {
    return (
      <View>
        <Text>{rowData.name}</Text>
      </View>
    );
  }
  
  render() {
    return (
      <View>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
        <Button onPress={this.appendNewItem} title="追加新项" />
      </View>
    );
  }
}

export default MyComponent;