Когда большой список, плоский список запаздывает и иногда вылетает в приложении - PullRequest
Новая
       14

Когда большой список, плоский список запаздывает и иногда вылетает в приложении

0 голосов
/ 11 октября 2018

Пожалуйста, помогите мне.Когда большой список, плоский список запаздывает, и иногда происходит сбой приложения в реагировать родной.

Я пробовал Оптимизированный список: он не показывает изображения, и я пробовал реагировать родной большой список.Ничего не работает.

Это код: 

 {loading == false && (
                      <FlatList
                        data={this.state.data}
                        numColumns="2"
                        renderItem={({ item }) => <ExampleComponent url= 
                        {item.media} />}
                        keyExtractor={(item, index) => item.itemurl}
                        windowSize={15}
                        onEndReachedThreshold={1}
                        onEndReached={this.handleLoadMore}
                        removeClippedSubviews={true}
                        maxToRenderPerBatch={10}

                      />
                    )}

Это класс компонента 

import React, { PureComponent } from "react";
import { View, Text, StyleSheet, Image ,TouchableOpacity } from "react-native";
import FastImage from "react-native-fast-image";
export default class ExampleComponent extends PureComponent {
  constructor(props) {
    super(props);
    //console.log(this.props);
  }

  render() {
    return (
        <TouchableOpacity style={styles.imageContainer}>
      <View >
        <FastImage
          source={{
            uri:this.props.url
          }}
          style={styles.imageStyle}
        />
      </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#dedede",
    borderRadius: 5,
    margin: 5
  },
  imageStyle: {
    flex: 1,
    width: null,
    height: 100,
    borderTopLeftRadius:5,
    borderTopRightRadius:5
  },

});

И я получаю это сообщение в консоли, когда строкиmore

Это дескриптор load more function 

handleLoadMore = () => {
console.log("Called");

if (this.state.next != 0) {
  const u =
    "https://url&q=" +
    this.props.navigation.state.params.data +
    "&pos=" +
    this.state.next;
  fetch(u, {
    method: "GET"
  })
    .then(res => res.json())
    .then(response => {
      this.setState({
        data: [...this.state.data, ...response.results],
        next: response.next
      });
    });
}

}

VirtualizedList: у вас большой список, который медленно обновляется - убедитесь, чтоВаша функция renderItem отображает компоненты, которые соответствуют рекомендациям по производительности React, например PureComponent, shouldComponentUpdate и т. д. {"dt": 1098, "prevDt": 684, "contentLength": 6832}

1 Ответ

0 голосов
/ 11 октября 2018

Поскольку производительность Flatlist зависит от каждой реализации, вы можете следовать этим советам, чтобы помочь вам в вашем случае.

Попробуйте комбинации этих подходов:

  • Включение или отключение legacyImplementation
  • Включение или отключение disableVirtualization
  • Увеличение или уменьшение значения onEndReachedThreshold
  • Увеличение или уменьшение значения windowSize
  • Увеличение или уменьшение значения maxToRenderPerBatch
  • Реализация shouldComponentUpdate
  • Удаление конструктора из ExampleComponent
  • ВключитьremoveClippedSubviews только для Android
  • Используйте более простой ключExtractor, число, если это возможно.

На самом деле из документов :

экстрактор по умолчанию проверяет item.key, затем возвращается к использованию индекса, как это делает React.

Также

Проверьте в вашем методе визуализации, сколько элементовзагружается и отображается как в ExampleComponent, так и в вашем компоненте, который использует FlatList.

В качестве альтернативы

Попробуйте использовать Recyc.lerListview component.

Дополнительная литература

...