一次性显示100张图片,我能有什么办法...

大概思路：
1、2、3、4、5、6、7、null、null、null...
null、null、null...20、21、22、23、24、25、26、null、null、null...
null、null、null...94、95、96、97、98、99、100

1.每次只显示7张图片，然后前后的数据都赋为null

2.滑动一张图片以后，重新进行数据处理（上面的步骤）

/**
 * Created by chj on 2018/4/27.
 */
import React, { Component } from 'react'
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    ScrollView,
    Dimensions,
    Image
} from 'react-native'
import PropTypes from 'prop-types';

const {width, height} = Dimensions.get('window');

export default class showImages extends Component {

    constructor(props){
        super(props);
        this.formatterData = this.formatterData.bind(this);

        this.state = {
            currentImages: Array.from(this.props.images),
            currentIndex: 1
        }
    }

    componentDidMount() {
        let arr = Array.from(this.props.images);
        for (let i = 7; i<this.props.images.length-1; i++) {
            arr[i] = null
        }
        this.setState({
            currentImages: arr
        },()=>{
            console.log(this.state.currentImages);
        });
    }
    formatterData(){
        let arr = Array.from(this.state.currentImages);
        let current = this.state.currentIndex;

        if (current - 3 >= 0 && current + 3 <= this.props.images.length-1) {

            for (let i = 0; i<current - 3; i++) {
                console.log('iiii           :',i);
                arr[i] = null
            }
            for (let j = current - 3; j<=current + 3; j++) {
                console.log('iiii:',j);
                arr[j] = this.props.images[j]
            }
            for (let z = current + 3+1; z<this.props.images.length-1; z++) {
                console.log('iiii------------:',z);
                arr[z] = null
            }
        }
        this.setState({
            currentImages: arr
        },()=>{
            console.log(this.state.currentImages);
        });

    }

    render() {
        return <ScrollView ref="scrollView"
                           style={styles.container}
                           pagingEnabled={true}
                           horizontal={true}
                           onMomentumScrollEnd={(event)=>{
                               console.log('event.nativeEvent: ',event.nativeEvent);
                               const index = Number.parseInt(event.nativeEvent.contentOffset.x / width);
                               console.log('当前选中的index：',index);

                               this.setState({
                                   currentIndex: index
                               },()=>{
                                   this.formatterData();
                               })

                           }}
                >

            {
                this.state.currentImages.map((item,index)=>{
                    return item ? <Image key={item.key} resizeMode="contain" style={styles.imageStyle} source={item.url} /> :
                        <Image key={index} resizeMode="contain" style={styles.imageStyle} /> // 占位符，此处可以放一些提示图片、提示语之类
                })
            }

        </ScrollView>
    }
}
showImages.propTypes = {
    images: PropTypes.array.isRequired
};
showImages.defaultProps = {

};

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#F5FCFF',
        flexDirection: 'row',
    },
    imageStyle: {
        width: width,
        height: height - 64 - 49
    }
});

render() {
        const images = [{key: 'key1', url: image1},
                        {key: 'key2', url: image2},
                        {key: 'key3', url: image3},
                        {key: 'key4', url: image4},
                        {key: 'key5', url: image5},
                        {key: 'key6', url: image6},
                        {key: 'key7', url: image7},
                        {key: 'key8', url: image8},
                        {key: 'key9', url: image9},
                        {key: 'key10', url: image10},
                        {key: 'key11', url: image11},
                        {key: 'key12', url: image12},
                        {key: 'key13', url: image13},
                        {key: 'key14', url: image14},
                        {key: 'key15', url: image15},
                        {key: 'key16', url: image16},
                        {key: 'key17', url: image17},
                        {key: 'key18', url: image18},
                        {key: 'key19', url: image19},
                        {key: 'key20', url: image20},
                        {key: 'key21', url: image21},
                        {key: 'key22', url: image22},
                        {key: 'key23', url: image23},
                        {key: 'key24', url: image24},
                        {key: 'key25', url: image25},
                        ];

        return <View style={styles.container} >
            <ShowMoreImages images={images} />
        </View>
    }