Реактивный iOSRoll CameraRoll загружается слишком медленно.

Question

С помощью реагирующей системы я реализовал IOS CameraRoll, который сначала получает 300 изображений из альбома «Camera Roll» и продолжает получать 300 изображений, когда прокрутка заканчивается.Ниже мой код.

SalmonCameraRoll.js

import React from 'react'

import {
  View,
  Text,
  TouchableHighlight,
  Modal,
  StyleSheet,
  Button,
  CameraRoll,
  Image,
  Dimensions,
  ScrollView,
  FlatList,
} from 'react-native'

import Share from 'react-native-share';
import RNFetchBlob from 'react-native-fetch-blob';

let styles
const { width, height } = Dimensions.get('window')
const fetchAmount = 300;


class SalmonCameraRoll extends React.Component {
  static navigationOptions = {
    title: 'Salmon Camera Roll',
  }

  constructor(props) {
    super(props);
    this.state = {
      photos: [],
      // index: null,
      lastCursor: null,
      noMorePhotos: false,
      loadingMore: false,
      refreshing: false,
    };
    this.tryGetPhotos = this.tryGetPhotos.bind(this);
    this.getPhotos = this.getPhotos.bind(this);
    this.appendPhotos = this.appendPhotos.bind(this);
    this.renderImage = this.renderImage.bind(this);
    this.onEndReached = this.onEndReached.bind(this);
    this.getPhotos({first: fetchAmount, assetType: 'Photos'});
  }

  componentDidMount() {
    this.subs = [
      this.props.navigation.addListener('didFocus', () => {
        this.getPhotos({first: fetchAmount, assetType: 'Photos'});
      }),
    ];
  }

  componentWillUnmount() {
    this.subs.forEach(sub => sub.remove());
  }

  tryGetPhotos = (fetchParams) => {
    if (!this.state.loadingMore) {
      this.setState({ loadingMore: true }, () => { this.getPhotos(fetchParams)})
    }
  }

  getPhotos = (fetchParams) => {
    if (this.state.lastCursor) {
      fetchParams.after = this.state.lastCursor;
    }

    CameraRoll.getPhotos(fetchParams).then(
      r => this.appendPhotos(r)
    )
  }

  appendPhotos = (data) => {
    const photos = data.edges;
    const nextState = {
      loadingMore: false,
    };

    if (!data.page_info.has_next_page) {
      nextState.noMorePhotos = true;
    }

    if (photos.length > 0) {
      nextState.lastCursor = data.page_info.end_cursor;
      nextState.photos = this.state.photos.concat(photos);
      this.setState(nextState);
    }
  }

  onEndReached = () => {
    if (!this.state.noMorePhotos) {
      this.tryGetPhotos({first: fetchAmount, assetType: 'Photos'});
    }
  }

  renderImage = (photo, index) => {
    return (
      <TouchableHighlight
        style={{borderTopWidth: 1, borderRightWidth: 1, borderColor: 'white'}}
        key={index}
        underlayColor='transparent'
        onPress={() => {
            this.props.navigation.navigate('Camera', { backgroundImageUri: photo.node.image.uri })
          }
        } 
      >
        <Image
          style={{
            width: width/3,
            height: width/3
          }}
          representation={'thumbnail'}
          source={{uri: photo.node.image.uri}}
        />
      </TouchableHighlight>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.modalContainer}>
            <FlatList
              numColumns={3}
              data={this.state.photos}
              initialNumToRender={fetchAmount}
              onEndReachedThreshold={500}
              onEndReached={this.onEndReached}
              refreshing={this.state.refreshing}
              onRefresh={() => this.tryGetPhotos({first: fetchAmount, assetType: 'Photos'})}
              keyExtractor={(item, index) => index}
              renderItem={({ item, index }) => (
                this.renderImage(item, index)
              )}
            />
        </View>
      </View>
    )
  }
}

styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  modalContainer: {
    // paddingTop: 20,
    flex: 1,
  },
  scrollView: {
    flexWrap: 'wrap',
    flexDirection: 'row'
  },
  shareButton: {
    position: 'absolute',
    width,
    padding: 10,
    bottom: 0,
    left: 0
  }
})

export default SalmonCameraRoll

Проблема заключается в том, что при большом количестве изображений (около 10000 изображений) вАльбом Camera Roll ', каждый компонент изображения загружался так медленно, что он также загружался слишком медленно при соответствующей прокрутке.

В других известных приложениях, таких как Facebook или Instagram, он загружает все изображения сразу, без извлечения при достижении прокруткиконец.

Как я могу сделать так, чтобы мой компонент Image загружался быстро?Или, что лучше всего (если возможно), как я могу заставить мой CameraRoll быстро загружать все изображения сразу, без извлечения, когда прокрутка заканчивается?

Спасибо.