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

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

    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");
  };

renderFlatlist=（）=>{
返回(
index.toString（）}
renderItem={this.\u renderItem}
/>
);
};
_renderItem=（{item}）=>{
日志（“\u renderItem”，item.id）；
返回(
{
this.props.navigation.navigate（“CreateProject”{
数据库：this.props.navigation.state.params.database，
id:item.id，
来自：“编辑”
});
}}
>
项目名称：{item.Project_Name}
);
};
_handleLongPress=项目=>{
警惕。警惕（“LongPress”）；
};

---

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

您正在立即调用处理程序，但它需要是回调，即

（）=>此。_handleLongPress（项目）

。从那里，您可以设置高亮显示该行所需的任何状态

我建议使用一个辅助数据结构来跟踪哪些项目被长时间按下。下面是一个示例，我使用一个映射来存储所选项目的项目id并应用高亮显示样式。如果您不需要多个选定id，您可以自己保存选定id

这里的诀窍是使用react的FlatList

extraData

prop作为跳跳虎，在数据prop保持不变的情况下重新呈现列表（出于充分的理由，您不应该在组件内部修改数据源）

---

const selected={…this.state.selected}，这里选择的值是什么，如何选择？如果您指的是第88行，

this.state.selected

是所选项目的映射[id=>boolean]。在这一行中，对象被扩展到一个新的局部变量（也称为选定的

）。然后，您可以切换（即变异）此对象，而不影响组件状态。我们使用了本地变量名

selected

，因此在设置新状态时可以将代码缩短一点（请记住，react

setState

在新更新中合并，如果没有使用键，则将变量名用作键。