如何解决创建循环或播放交替背景的状态
我有一个列表,我想更改列表中项目的背景颜色。 基本上,为了增加对比度并获得更好的渲染效果,我想将背景从两个产品中的一个更改为两个。
为此,我想使用它:
backgroundColor: item.id % 2 === 0 ? '#fde3a7':'#FFF'
它有效,但问题是我的 ID 不一定是有序的,所以它给了我:
但是,我不知道如何将其应用于二分之一的产品。 我的想法是将一个变量作为参数传递,该变量随每个循环递增或使用状态,例如,在每个位置,背景都会发生变化(例如偶数位置:白色背景,奇数位置背景橙色)
另一方面,我有这个想法,但我对如何实现它有点迷茫。
我不知道我是否表达得很好,你是否理解我的问题。无论如何,感谢您提供的任何帮助。
列表的全部代码:
const Item = ({ item,onPress,style }) => (
<ListItem
style={{width:'100%'}}
containerStyle= {{backgroundColor: item.id % 2 === 0 ? '#fde3a7' : '#FFF'}}
bottomDivider
onPress={() => this.props.navigation.navigate('ProductDetails',{productId:parseInt(item.id)})}>
<ListItem.Content style={{flexDirection: 'row',justifyContent: 'space-between'}}>
<Image //source={{uri: URL + item.photo.["_1_"].url}} style={{ width: 25,height: 25}}
/>
<ListItem.Title style={{width: '65%',fontSize: 16}}>{ ( item.name.length > 20 ) ? item.name.substring(0,20) + ' ...' : item.name}</ListItem.Title>
<ListItem.Subtitle style={{ color: '#F78400',position: "absolute",bottom: 0,right: 0 }}>{item.cost}{i18n.t("products.money")}</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
);
解决方法
您可以使用从 renderItem 方法 (FlatList) 获得的索引参数而不是 item.id
renderItem({ item,index,separators });
通过索引扩展你的 renderItem 方法,并通过 props 将索引传递给 ListItem
,我希望你有一系列的物品。您应该检查项目 index
为
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。