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

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 prop 作为 re-render 列表的跳板，因为 data prop 没有改变（有充分的理由，你不应该在里面改变你的数据源组件）。

codesandbox

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

How to highlight an item from flatlist and show delete option to delete that item from the list on long press of that item?

react-native

react-native-android

react-native-flatlist