Последовательная загрузка изображений в React Native

Question

Предположим, я делаю приложение в стиле галереи, где вы можете просматривать список изображений в длинной полосе. Это кажется достаточно простым, но я сталкиваюсь с проблемой, когда эти изображения загружаются одновременно и (мое предположение) состоит в том, что эти изображения находятся за какой-то службой защиты от DDoS, которая не позволяет мне загружать их все одновременно ( дал мне 403 ошибки).

Таким образом, мое решение состояло бы в том, чтобы загружать их одну за другой последовательно, однако я не уверен, как это можно сделать в React, так как я совершенно новичок в React / React Native в целом и в связях между родственными компонентами. и / или ребенок-родитель не очень прямолинеен. Я прочитал о Redux и это может быть решением? - Но у меня до сих пор нет четкой картины того, как это можно сделать.

Например вот что у меня не работает

class Gallery extends React.Component {
	
  ...
	
  renderPage(page) { //Each Images
		return (<Page image={page.item} 	/>)
	}

  ...
  
	render () {	
		return (
			<Container>
				<Header />
					<Content>
						{ this.state.isLoading ? <Spinner /> : (
                                // this loads all images at the same time which causes error
								<FlatList 
									initialNumToRender={2}
									data={this.state.pageArray}
									renderItem={this.renderPage}
								 	keyExtractor={(item, index) => index}
								 />
							)}
					</Content>
				</Container>
			);
	}
}


export default Gallery;

Answer 1

Я попробовал это сам, может быть, это вам немного поможет.

import React, {Component} from 'react';
import {Text, FlatList} from 'react-native';

class Gallery extends Component {
  state = {
    pageArr: [{name: 'abc'}, {name: 'def'}, {name: 'ghi'}],
    isLoading: false,
  };

  renderPage(page) {
    return <Text>{page.name}</Text>;
  }

  render() {
    const {isLoading, pageArr} = this.state;

    return isLoading ? (
      <Spinner />
    ) : (
      <FlatList
        data={pageArr}
        renderItem={({item}) => this.renderPage(item)}
        keyExtractor={(item, index) => index}
      />
    );
  }
}

export default Gallery;