如何突出显示平面列表中的项目并显示删除选项以在长按该项目时从列表中删除该项目

Question

我想在长按该项目时突出显示平面列表中的一个项目，并显示删除选项以从列表中删除该项目。

    renderFlatlist = () => {
    return (
      <View style={styles.flatListContainer}>
        <FlatList
          style={styles.flatListStyle}
          showsVerticalScrollIndicator={false}
          data={this.state.fetchProjectDetail}
          keyExtractor={(item, index) => index.toString()}
          renderItem={this._renderItem}
        />
      </View>
    );
  };
  _renderItem = ({ item }) => {
    console.log("_renderItem", item.id);
    return (
      <TouchableOpacity
        style={{ marginTop: 10 }}
        onLongPress={this._handleLongPress(item)}
        onPress={() => {
          this.props.navigation.navigate("CreateProject", {
            database: this.props.navigation.state.params.database,
            id: item.id,
            from: "edit"
          });
        }}
      >
        <Text>Project Name: {item.project_name}</Text>
      </TouchableOpacity>
    );
  };
  _handleLongPress = item => {
    Alert.alert("LongPress");
  };

我已经做了这么多，但是当我呈现列表时，警报不断弹出，而无需长时间按列表中的该项目。以及如何在长按时突出显示该项目并显示删除选项以从列表中删除该项目。

Answer 1

您立即调用处理程序，但它需要是一个回调，即 () => this._handleLongPress(item) .从那里，您可以设置突出显示该行所需的任何状态。

我建议使用辅助数据结构来跟踪哪些项目被长时间按下。下面是一个示例，其中我使用地图来存储所选项目的项目 ID 并应用突出显示样式。如果您不需要多个选择，您可以单独保存所选 id。

这里的诀窍是使用 react 的 FlatList extraData 道具作为跳跳虎来重新渲染列表，因为数据道具没有变化(出于充分的理由，你不应该在组件中改变你的数据源(。

代码沙盒