react-native - React Native Flatlist 如何将第一项设置为默认选择?
问题描述
我需要如下所示的平面列表,默认选择第一项“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}
/>
}
/>
解决方案
我会将选定的道具传递给 PaymentCard 组件。PaymentCard 组件然后使用 selected 属性在内部控制 UI。
有两种方法可以将第一个元素设置为默认值:
- 您在索引本身的顶部执行此操作并检查索引是否等于 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}
/>
)}
/>
- 或者您根据提供的状态来检查 currentPaymentCard === VISA
推荐阅读
- javascript - 在 laravel 中使用 auth()->login() 方法时如何防止重定向?
- oracle - 为 AWS lambda 函数中使用的 ODA.NET 驱动程序启用本机网络加密
- sql - oracle不能创建索引
- php - 如何从 DataTables 行中获取值?
- javascript - TypeError:无法读取未定义的属性“onSelect”
- angular6 - Angular6 chartjs-plugin-streaming onRefresh()不起作用
- javascript - ChartJS 不绘制图表
- node.js - React 应用程序开始使用错误的网络适配器
- r - 绘制序数变量的频率计数
- javascript - 我可以使用类在 DOM 中创建/放置元素吗?