时间戳

首页 > 解决方案 > 在 React Native 中按顺序加载图像

javascript - 在 React Native 中按顺序加载图像

问题描述

假设我正在制作一个类似画廊的应用程序，您可以在其中查看长条形图像列表。这看起来很简单，但我遇到了一个问题，这些图像是同时加载的，并且（我的猜测）是这些图像位于某种 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;

标签： javascriptreactjsreact-native

解决方案

我自己试过这个，也许它会对你有所帮助。

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;

推荐阅读