我正试图在按下时使用提取器高亮显示平面列表中的选定项目

Question

从"React"导入React，｛useState｝；从"react native"导入｛Image，FlatList，Dimensions，StyleSheet｝；从"react native fast image"导入FastImage

const-picsumImages＝new Array(28(.fill("；http://placeimg.com/640/360/any"(；

设generateRandomNum=((=>Math.floor(Math.random((*1001(；

函数renderItem(｛item｝({返回(

<FastImage
source={{ uri: item}}
style={styles.itemView}

/>
);

}

const OtasView=(props(=>｛

const [images, setImages] = useState(picsumImages);  
return (
<FlatList data={images} renderItem={renderItem}  numColumns={3}  style={{ marginLeft: 18, marginRight: 18, marginTop: 40 }}  keyboardShouldPersistTaps="always"
showsVerticalScrollIndicator={false} keyExtractor={(renderItem) => generateRandomNum().toString()}/>

);

};
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: "center",
},
itemView: {
flex: 1 / 3,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
margin: 5,
aspectRatio: 1,
borderRadius: 200 / 2
},
});

export default OtasView;

Answer 1

这可能有助于

const [images, setImages] = useState(picsumImages); 
onSelect = index => {
const data = […images].map(item => item.selected = false);  
data[index].selected = true;
setImages(data);
}

function renderItem({ item, index }) { 

const style = index.selected ? styles.profileImgContainer : {};
return (
<TouchableHighlight style={style} onPress={() => onSelect(index)}>
<FastImage
source={{ uri: item}}
style={styles.itemView}    
/>
</TouchableHighlight> 
);
export default styles = StyleSheet.create({
profileImgContainer: {
marginLeft: 8,
height: 80,
width: 80,
borderRadius: 40,
},
itemView: {
flex: 1 / 3,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
margin: 5,
aspectRatio: 1,
borderRadius: 200 / 2
}
});