React Native点击FlatList内自定义Item显示对应隐藏按钮如何实现？

核心思路是为列表项维护独立的显隐状态，由于FlatList每个子项都有唯一id，我们通过存储当前激活的项id来控制对应按钮的显示隐藏。

步骤1：新增状态管理 #

在App组件内引入useState，存储当前点击激活的列表项id：

// 顶部先引入useState
import React, { useState } from 'react';

const App = () => {
  // 新增状态，初始为null，默认所有项的按钮都隐藏
  const [activeItemId, setActiveItemId] = useState<string | number | null>(null);
  // 原有代码...
}

步骤2：给Item组件绑定点击事件 #

如果你的Item组件支持接收onPress属性，直接绑定即可；如果是纯展示组件，外层包裹TouchableOpacity实现点击监听，点击时切换当前项的激活状态：

const renderItem = ({item}: any) => (
  <View style={{backgroundColor: colors.white}}>
    {/* 给Item加点击事件 */}
    <TouchableOpacity 
      activeOpacity={0.8}
      onPress={() => {
        // 如果点击的是已经激活的项，就隐藏按钮，否则显示当前项的按钮
        setActiveItemId(activeItemId === item.id ? null : item.id)
      }}
    >
      <Item title={item.title} />
    </TouchableOpacity>
    {/* 只有当前项是激活状态时，才渲染两个按钮 */}
    {activeItemId === item.id && (
      <>
        <TouchableOpacity activeOpacity={0.5} style={styles.buttonHeartStyle}>
          <Image source={heart} />
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.5} style={styles.buttonCheckStyle}>
          <Image source={check} />
        </TouchableOpacity>
      </>
    )}
  </View>
);

扩展场景：支持多项同时显示按钮 #

如果需要点击多个项都保留按钮显示，把状态改成存储激活id的数组即可：

const [activeIds, setActiveIds] = useState<(string | number)[]>([]);

// 点击事件修改为
onPress={() => {
  if (activeIds.includes(item.id)) {
    // 已激活就移除
    setActiveIds(activeIds.filter(id => id !== item.id))
  } else {
    // 未激活就加入
    setActiveIds([...activeIds, item.id])
  }
}}

// 显示条件修改为
{activeIds.includes(item.id) && (/* 按钮组件 */)}

内容的提问来源于stack exchange，提问作者rykim