React Native中如何实现多个TouchableOpacity的点击状态相互独立？

问题根因 #

所有TouchableOpacity共用了同一个布尔类型的isPressed状态，任意按钮触发状态修改都会同步影响所有按钮的样式判断，导致全部按钮状态同步变化。

解决方案（无需拆分组件，保留现有结构） #

把单值状态改为存储已选中食材的标识集合，用每个按钮对应的唯一食材名作为判断依据，单独控制每个按钮的选中状态：

1. 替换原有状态定义和点击处理函数

function Grocery({ navigation }) {
  // 替换原来的isPressed状态，用Set存储已选中的食材名
  const [selectedItems, setSelectedItems] = useState(new Set());

  // 替换原来的onPress函数，接收食材名参数切换对应项的选中状态
  const togglePress = (itemName) => {
    const newSelected = new Set(selectedItems);
    newSelected.has(itemName) ? newSelected.delete(itemName) : newSelected.add(itemName);
    setSelectedItems(newSelected);
  };

  // 其余原有逻辑保留...

2. 修改每个TouchableOpacity的触发逻辑和样式判断

// pasta按钮修改示例
<TouchableOpacity style={styles.button} onPress={() => {AddToPanetry("pasta");togglePress("pasta");}}  >
  <View style={selectedItems.has("pasta") && styles.pressedButtonStyle} />
  <Image style={styles.imageright} source={require('../assets/Pastaa.jpg')} />
  <Text> pasta</Text>
</TouchableOpacity>

// eggs按钮修改示例
<TouchableOpacity onPress={() => {AddToPanetry("eggs");togglePress("eggs");}}  >
  <View style={selectedItems.has("eggs") && styles.pressedButtonStyle} />
  <Image style={styles.imageleft} source={require('../assets/eggs.jpg')} />
  <Text>eggs</Text>
</TouchableOpacity>

补充说明 #

• 原有styles样式代码完全不需要修改
• 后续新增按钮只需给每个按钮分配唯一的食材标识，按上述格式修改onPress和样式判断逻辑即可正常使用
• 注意：Set属于引用类型，修改状态时必须新建一个Set实例再更新状态，否则React无法检测到状态变化触发重渲染

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