React Native - как показать сразу все изображения, только когда они все загружены? - PullRequest
Новая
       38

React Native - как показать сразу все изображения, только когда они все загружены?

0 голосов
/ 25 мая 2020

Я использую элемент FlatList, который отображает список компонентов, имеющих изображение.

Проблема в том, что изображения загружаются случайным образом, и это выглядит не очень хорошо. Я хочу, чтобы все изображения были показаны вместе сразу.

Как я могу показывать изображения только тогда, когда все элементы в FlatList завершат sh загрузку?

Мой код:

FlatList, который отображает компонент MatchDetail: 

     <FlatList
       horizontal
       showsHorizontalScrollIndicator={false}
       data={profiles}
       keyExtractor={(profile) => profile.uid}
       renderItem={({ item }) => {
         return (
             <MatchDetail match={item} />
         );
       }}
     />

Компонент MatchDetail: 

const MatchDetail = ({ match }) => {
  const photoUri = match.photosUrls[0];

  return (
    <ImageBackground
      style={styles.image}
      imageStyle={{ borderRadius: 10 }}
      source={{ uri: photoUri }}
    >
      <Badge
        containerStyle={{ position: "absolute", padding: 3 }}
        value="1"
        status="success"
      />
    </ImageBackground>
  );
};

Спасибо за вашу помощь :)

...