推荐一款强大的React Native滑动列表视图库——react-native-swipe-list-view

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import SwipeListView from 'react-native-swipe-list-view';
 
export default class App extends React.Component {
  // 定义列表数据和SwipeRow的ref
  swipeRowRefs = {};
  data = [...Array(20).keys()]; // 示例数据，生成数字数组
 
  // 删除按钮的回调函数
  deleteRow = (rowMap, rowKey) => {
    rowMap[rowKey].closeRow(); // 关闭当前行
    const newData = [...this.data];
    const index = newData.indexOf(rowKey);
    newData.splice(index, 1); // 删除数据中的对应项
    this.data = newData; // 更新数据
  };
 
  // 用于渲染每一行的函数
  renderRow = (dataObj, rowMap) => {
    const swipeRow = (
      <SwipeRow
        ref={(c) => this.swipeRowRefs[dataObj] = c}
        data={dataObj}
        leftActions={[
          {
            text: 'Delete',
            onPress: () => this.deleteRow(rowMap, dataObj),
            type: 'delete',
          },
        ]}
      >
        <Text>I am {dataObj} in a row</Text>
      </SwipeRow>
    );
    return swipeRow;
  };
 
  render() {
    return (
      <View style={styles.container}>
        <SwipeListView
          data={this.data}
          renderRow={this.renderRow}
          disableRightSwipe
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

这段代码展示了如何使用react-native-swipe-list-view库来创建一个可以滑动列出操作按钮的列表。每一行都可以被滑动并显示删除按钮，点击删除按钮会执行删除行的操作并更新数据。