反应原生风格SwipeListView

Question

我在我的React Native应用程序中使用SwipeListView，当我向左滑动时，出现两个按钮，一个用于删除，另一个用于更新，我这里遇到的问题是那些隐藏项目按钮的高度不像rendreItem的大小，我尝试了不同的使它具有相同高度的方法，但没有任何作用，我不知道我错过了什么 这就是我得到的

这是我的代码

const renderItem = (data) => (
    <View style={styles.cardContainer}>
      <View
        style={[
          styles.checkBoxContainer,
          data.item.done ? styles.checked : null,
        ]}
      />
      <TouchableOpacity>
        <View>
          <Text>{data.item.name}</Text>
        </View>
      </TouchableOpacity>
    </View>
  );

隐藏物品

 const renderHiddenItem = (data, rowMap) => (
        <View style={styles.rowBack}>
          <TouchableOpacity
            style={[styles.actionButton, styles.updateButton]}
            onPress={() => updateItem(data.item)}
          >
            <Text style={styles.actionText}>Update</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.actionButton, styles.deleteButton]}
            onPress={() => deleteItem(data.item)}
          >
            <Text style={styles.actionText}>Delete</Text>
          </TouchableOpacity>
        </View>
      );

这就是我渲染项目的方式

<>
      <SwipeListView
        data={tasks}
        renderItem={renderItem}
        renderHiddenItem={renderHiddenItem}
        rightOpenValue={-150}
      />
    </>

这就是风格

cardContainer: {
    padding: 20,
    flexDirection: "row",
    backgroundColor: colors.normalTask,
    marginBottom: 10,
    borderRadius: 12,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 3, // For Android
  },

  checkBoxContainer: {
    width: 20,
    height: 20,
    borderWidth: 1,
    marginRight: 10,
  },
  checked: {
  },
  rowBack: {
    alignItems: "center",
    flexDirection: "row-reverse", 
    padding: 20,
    height: "100%",
    },
  actionButton: {
    alignItems: "center",
    justifyContent: "center",
    width: 75,
    
    height: "100%",
    
  },
  updateButton: {
    backgroundColor: "blue",
  },
  deleteButton: {
    backgroundColor: "red",
  },
  actionText: {
    color: "#FFF",
  },

Answer 1

将你的actionButton样式修改为：

actionButton: {
    alignItems: "center",
    justifyContent: "center",
    width: 75,
    height: "80%",
    marginBottom: 10,
},

Answer 2

我在空白页面上尝试过，如果其他回复不适合你，这里有一个更新的样式，固定高度为70

cardContainer: {
    alignItems: 'center',
    paddingLeft: 20,
    flexDirection: 'row',
    backgroundColor: "purple",
    flex: 1,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 3, // For Android
    height: 70,
    },

  checkBoxContainer: {
    width: 20,
    height: 20,
    borderWidth: 1,
    marginRight: 10,
  },
  checked: {},
  rowBack: {
    alignItems: 'center',
    height: '100%',
    flexDirection: 'row-reverse',
  },
  actionButton: {
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
    flex: 1,
  },
  updateButton: {
    backgroundColor: 'blue',
  },
  deleteButton: {
    backgroundColor: 'red',
  },
  actionText: {
    color: '#FFF',
  },