在 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;