Блог

импортируйте React, {useState} из ‘react’; импортируйте {Image, FlatList, Dimensions, StyleSheet} из ‘react-native’; импортируйте FastImage из ‘react-native-fast-image’

const picsumImages = новый массив(28).fill(«http://placeimg.com/640/360/any «);

пусть generateRandomNum = () => Math.floor(Math.random() * 1001);

функция renderItem({ item }) { return (

   <FastImage
    source={{ uri: item}}
    style={styles.itemView}
    
  />
);
  

}

const OtasView = (реквизит) => {

 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;
  

Это может помочь

 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
    }
});