react-native - 如何更改平面列表可选项目的颜色
问题描述
如何在平面列表中选择项目时更改颜色平面列表项颜色?
我已尝试对有关平面列表的本机文档做出反应,但我对如何在我的代码中正确使用该文档有疑问
function Item({ id, title, selected, onSelect }) {
return (
<TouchableOpacity
onPress={() => onSelect(id)}
style={[
styles.item,
{ backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
]}>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
class ApplyLeaveScreen extends Component {
const [selected, setSelected] = React.useState(new Map());
const onSelect = React.useCallback(
id => {
const newSelected = new Map(selected);
newSelected.set(id, !selected.get(id));
setSelected(newSelected);
},
[selected],
);
render() {
return (
<ScrollView>
<View style={styles.content}>
<FlatList contentContainerStyle ={{justifyContent:'center', margin:5}}
renderItem={({ item }) =>
<Item id={item.id} title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}/>}
keyExtractor={item => item.id}
id={item.id}
/>
</View>
</ScrollView>
}
解决方案
推荐阅读
- lazarus - 不能在拉撒路使用 Indy
- c# - C# Exchange Service 突然报错 The property Hashtags is valid only for Exchange Exchange2015 or later versions
- android - 使用 ViewModel 的接口?
- amazon-web-services - Cloudformation 附加到堆栈
- javascript - jquery 3 就绪功能无法正常工作
- elasticsearch - 从 Kibana 发送电子邮件通知
- docker - 我可以在基于 arm8 的 Synology Nas 上安装 Docker
- python - 如何从 python 字符串中删除大量空格?
- java - libphonenumber - 在不知道国家代码的情况下格式化电话号码
- java - Facebook延迟深层链接不起作用