如何根据 React Native 中按下的 Pressable 显示图标？

Question

我有一个多个 Pressable 组件。我怎样才能做到当我点击摩托车可压件时，检查图标将显示在其旁边，如果在三轮可压件上，检查图标将显示在其旁边，而摩托车图标上的图标将消失。

我尝试创建一个状态，但它同时将所有图标设置到位。这是代码：

  const [checkIcon, setCheckIcon] = useState(false)

<Pressable
            style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
              onPress={() => setCheckIcon(true)}
            >
              <Image source={require("../assets/motorcycle.png")} style={styles.modalFieldImage} />
              <View style={styles.modalFieldVehicleNameContainer}>
                <Text style={styles.modalFieldText}>Motorcycle</Text>
                <Text style={styles.modalFieldTextDescription}>Cheapest option perfect for small-sized items</Text>
                <Text style={styles.modalFieldTextDescription}>Up to 20 kg</Text>
              </View>
              {
                checkIcon === true ? <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} /> : null
              }
            </Pressable>

            <Pressable
              style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
              onPress={() => setCheckIcon(true)}
            >
              <Image source={require("../assets/tricycle.png")} style={styles.modalFieldImage} />
              <View style={styles.modalFieldVehicleNameContainer}>
                <Text style={styles.modalFieldText}>Tricycle</Text>
                <Text style={styles.modalFieldTextDescription}>Perfect for multiple medium-sized items</Text>
                <Text style={styles.modalFieldTextDescription}>Up to 70 kg</Text>
              </View>
              {
                checkIcon === true ? <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} /> : null
              }
            </Pressable>

            <Pressable
              style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
              onPress={() => setCheckIcon(true)}
            >
              <Image source={require("../assets/sedan.png")} style={styles.modalFieldImage} />
              <View style={styles.modalFieldVehicleNameContainer}>
                <Text style={styles.modalFieldText}>Sedan Car</Text>
                <Text style={styles.modalFieldTextDescription}>Good for cakes and multiple small to medium-sized items</Text>
                <Text style={styles.modalFieldTextDescription}>Up to 200 kg</Text>
              </View>
              {
                checkIcon === true ? <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} /> : null
              }
            </Pressable>

Answer 1

这是一个简单的示例，使用索引状态来记录用户选择的项目。

由于你的列表可以动态生成，所以你可以使用一个数组来存储所有渲染参数并用于map()一一渲染。

const [optionArray, setOptionArray] = useState([
    {
      title: "Motorcycle",
      desc1: "Cheapest option perfect for small-sized items",
      desc2: "Up to 20 kg",
      img: "../assets/motorcycle.png",
    },
    {
      title: "Tricycle",
      desc1: "Perfect for multiple medium-sized items",
      desc2: "Up to 70 kg",
      img: "../assets/tricycle.png"
    },
    {
      title: "Sedan Car",
      desc1: "Good for cakes and multiple small to medium-sized items",
      desc2: "Up to 200 kg",
      img: "../assets/sedan.png",
    }
  ]);
  const [selectedIndex, setSelectedIndex] = useState(-1);   //Nothing is selected with initial render

  const ListItem = ({option, index}) =>{
    return(
      <Pressable
        style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
        onPress={() => setSelectedIndex(index)}
      >
        <Image source={option.img} style={styles.modalFieldImage} />
        <View style={styles.modalFieldVehicleNameContainer}>
          <Text style={styles.modalFieldText}>{option.title}</Text>
          <Text style={styles.modalFieldTextDescription}>{option.desc1}</Text>
          <Text style={styles.modalFieldTextDescription}>{option.desc2}</Text>
        </View>
        {
          index === selectedIndex && <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} />
        }
      </Pressable>
    )
  }

  return(
    <View>
      {
        optionArray.map((option, index) => 
          <ListItem option={option} index={index} />
        )
      }
    </View>
  )

Hardik Prajapati 的回答也是另一种解决方案。该方法不会影响运行时对数据列表进行排序的结果。但大的对象修改会触发组件的重新渲染，在某些情况下可能会导致性能问题。

因此，您可以根据您的情况选择不同的方法。