React Native Flatlist 如何将第一项设置为默认选择？

Question

我需要像下面这样的平面列表，默认选择第一项“VISA”，我该如何使它工作？

非常感谢！

这是我的代码：

Payment_Card（组件）：

 <FlatList 
        horizontal ={true}
        data = {payment_methods}
        keyExtractor ={card => card.id.toString()}
        renderItem ={({item,index})=>
        <Payment_Card
        img = {item.img}
        onPress ={()=>{
            setIndexValue(index);
            console.log(item);
            
        }}
        bgColor = {index===indexValue?colors.light_yellow:colors.white}
       
        />
    }
        />

Answer 1

我会将选定的道具传递给 PaymentCard 组件。 PaymentCard 组件然后使用选定的道具在内部控制 UI。

有两种方法可以将第一个元素设置为默认值：

1. 您在索引本身之上执行此操作并检查索引是否等于 0

    <FlatList
      horizontal={true}
      data={payment_methods}
      keyExtractor={(card) => card.id.toString()}
      renderItem={({ item, index }) => (
        <Payment_Card
          img={item.img}
          onPress={() => {
            setIndexValue(index);
            console.log(item);
          }}
          selected={index === 0}
        />
      )}
    />

2. 或者您根据提供的状态来检查 currentPaymentCard === VISA

Answer 2

@Yellow Clock，初始化indexValue状态为：

const [indexValue, setIndexValue] = useState(0);