React Native中如何根据点击的Pressable组件显示对应勾选图标

你当前用单个布尔值checkIcon作为状态，所有Pressable组件的图标显示都依赖这个值，所以只要设置为true，所有图标都会同时显示，无法区分选中的具体选项。

修改方案 #

将状态改为存储选中的车辆标识（字符串类型），初始值设为null表示未选中任何选项；每个Pressable点击时设置对应的标识，图标仅在当前选中标识匹配时显示。

修改后的代码 #

import { useState } from 'react';
import { Pressable, Image, View, Text } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';

// 替换为你的样式定义
const styles = {
  modalField: {},
  modalFieldImage: {},
  modalFieldVehicleNameContainer: {},
  modalFieldText: {},
  modalFieldTextDescription: {},
  modalFieldIcon: {}
};

const VehicleSelector = () => {
  // 用字符串存储选中的车辆标识，初始为null
  const [selectedVehicle, setSelectedVehicle] = useState(null);

  return (
    <>
      <Pressable
        style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
        onPress={() => setSelectedVehicle('motorcycle')}
      >
        <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>
        {/* 仅当选中当前车辆时显示图标 */}
        {selectedVehicle === 'motorcycle' && (
          <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} />
        )}
      </Pressable>

      <Pressable
        style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
        onPress={() => setSelectedVehicle('tricycle')}
      >
        <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>
        {selectedVehicle === 'tricycle' && (
          <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} />
        )}
      </Pressable>

      <Pressable
        style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
        onPress={() => setSelectedVehicle('sedan')}
      >
        <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>
        {selectedVehicle === 'sedan' && (
          <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} />
        )}
      </Pressable>
    </>
  );
};

export default VehicleSelector;

优化建议（减少重复代码） #

把车辆数据抽成数组，通过循环渲染组件，后续新增车辆只需修改数据数组即可：

const [selectedVehicle, setSelectedVehicle] = useState(null);

// 车辆数据数组
const vehicles = [
  {
    id: 'motorcycle',
    image: require("../assets/motorcycle.png"),
    name: 'Motorcycle',
    descriptions: [
      'Cheapest option perfect for small-sized items',
      'Up to 20 kg'
    ]
  },
  {
    id: 'tricycle',
    image: require("../assets/tricycle.png"),
    name: 'Tricycle',
    descriptions: [
      'Perfect for multiple medium-sized items',
      'Up to 70 kg'
    ]
  },
  {
    id: 'sedan',
    image: require("../assets/sedan.png"),
    name: 'Sedan Car',
    descriptions: [
      'Good for cakes and multiple small to medium-sized items',
      'Up to 200 kg'
    ]
  }
];

// 渲染部分
return (
  <View>
    {vehicles.map(vehicle => (
      <Pressable
        key={vehicle.id}
        style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
        onPress={() => setSelectedVehicle(vehicle.id)}
      >
        <Image source={vehicle.image} style={styles.modalFieldImage} />
        <View style={styles.modalFieldVehicleNameContainer}>
          <Text style={styles.modalFieldText}>{vehicle.name}</Text>
          {vehicle.descriptions.map((desc, idx) => (
            <Text key={idx} style={styles.modalFieldTextDescription}>{desc}</Text>
          ))}
        </View>
        {selectedVehicle === vehicle.id && (
          <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} />
        )}
      </Pressable>
    ))}
  </View>
);

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