如何根據在ReactNative中按下哪個Pressable來顯示圖示？

我有多個 Pressable 組件。我怎樣才能做到當我點擊 Motorcycle pressable 時，復選圖示會顯示在它旁邊，如果在 Tricycle Pressable 上，復選圖示會顯示在它旁邊，而 Motorcycle 圖示上的復選圖示將會消失。

我曾嘗試創建一個狀態，但它同時將所有圖示設定到位。這是代碼：

  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>

uj5u.com熱心網友回復：

這是一個簡單的例子，使用索引狀態來記錄用戶選擇了哪個專案。

由于您的串列可以動態生成，因此您可以使用陣列存盤所有用于渲染的引數并用于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 的回答也是另一種解決方案。當資料串列在運行時排序時，該方法不會影響結果。但是大物件修改會觸發組件的重新渲染，這在某些情況下可能會導致性能問題。

因此，您可以為您的案例選擇不同的方法。

uj5u.com熱心網友回復：

創建車輛專案陣列，如 vehicle:[ image:'put your imageUrl', name:'', description:'', clickStatus:true ]

然后使用 map 方法顯示所有陣列項，當您單擊任何項??時，使用 clickStatus 鍵可按下項 true 和其他兩項 false 更新陣列，并根據 true 或 false顯示檢查圖示

標籤：反应反应本机反应挂钩图标状态

上一篇：在Python字典的值串列中拆分鏈接

下一篇：在ReactApp中使用帶有axios的異步等待函式的未定義狀態