Загружать только видимые изображения во Flatlist реагировать на родные

Я сделал сетку изображений, используя Flatlist. Я загружаю изображения из Интернета. В настоящее время все изображения загружаются, как только я перехожу на эту конкретную страницу. Я хочу загружать только те изображения, которые видны на экране, и опираться на прокрутку. На экране одновременно отображаются шесть изображений.

Можно ли загружать изображения на прокрутку во Flatlist?


react-native react-native-android react-native-flatlist
person Paras Watts    schedule 10.11.2017    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Свойства, которые вам нужно объединить, на самом деле являются initialNumToRender и размер окна. Если вы хотите, чтобы одновременно отображался только один экран изображений, вы должны использовать windowSize={1}. Я лично рекомендую вам использовать как минимум windowSize={3}, чтобы у вас отображались предыдущий и следующий экраны, но это действительно зависит от размеров изображений, которые вы показываете. Также обратите внимание, что элементы, указанные с помощью initialNumToRender, никогда не будут удалены. Это должно позволить функцию «Перейти к началу». Вы можете или не можете хотеть такие предметы.

Также полезно отметить, что вам может потребоваться реализовать какое-то кэширование этих изображений. Как только вы «отмените визуализацию» их, и вам нужно будет отобразить их снова, для них будет сделан новый запрос, в результате чего на устройстве вашего пользователя будет использоваться больше пропускной способности.

person Valery    schedule 21.03.2018

arrow_upward
2
arrow_downward

Вы должны иметь возможность сделать это с помощью свойства initialNumToRender на плоский список.

поэтому ваше объявление flatList может быть:

<FlatList
    initialNumToRender={2}
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
/>
person Petrogad    schedule 07.02.2018

arrow_upward
2
arrow_downward

Вы можете использовать Flatlist, как показано ниже, чтобы загружать только те изображения, которые находятся в текущем окне просмотра.

             <FlatList
                    ref={(view) => (this.parentScrollView = view)}
                    data={this.state.data}
                    onScroll={this.handleScroll}
                    keyExtractor={keyExtractor}
                    showsVerticalScrollIndicator={false}
                    bounces={false}
                    numColumns={3}
                    renderItem={this.renderItem}
                    ItemSeparatorComponent={this.ItemSeparatorComponent}
                    ListEmptyComponent={this.ListEmptyComponent}

                    //code for optimization and load only visible items
                    initialNumToRender={8}
                    maxToRenderPerBatch={2}
                    onEndReachedThreshold={0.1}
                    onMomentumScrollBegin={this.onMomentumScrollBegin}
                    onEndReached={this.onEndReached}
           />

My onEndReached is:

onEndReached = () => {
        console.log('end reached');
        if (!this.onEndReachedCalledDuringMomentum) {
            console.log('loading more archived products');
            this.loadMoreProducts();                
            this.onEndReachedCalledDuringMomentum = true;
        }
    }

И onMomentumScrollBegin это:

onMomentumScrollBegin = () => { this.onEndReachedCalledDuringMomentum = false; }

initialNumToRender смонтирует первые 8 элементов и никогда не удалит их, если только сам Flatlist не будет размонтирован. Полезно сохранить производительность прокрутки списка при быстрой прокрутке списка.

onMomentumScrollBegin и onEndReachedThreshold используются, когда нужно загрузить больше элементов для списка. Это может быть вызов API и т. д.

person Ajay    schedule 22.10.2018