在平面列表中选择项目时如何更改平面列表颜色?
我已经尝试过响应有关平面列表的本机文档,但是我对如何在我的代码中正确使用该文档有疑问
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>
}