ReactNative - FliatList превращает белый экран при отображении множества элементов - PullRequest
Новая
       32

ReactNative - FliatList превращает белый экран при отображении множества элементов

0 голосов
/ 04 марта 2020

Android: 4.4.2, 8.0

Реактивный: 0.61.4

Это происходит только на android.

https://gfycat.com/flimsyastonishingguineafowl

<FlatList
    style={{ transform: [{ scaleY: -1 }], marginBottom: 10 }}
    removeClippedSubviews
    initialNumToRender={20}
    data={replyList}
    onEndReached={this.nextPage}
    contentContainerStyle={{ justifyContent: 'flex-end', flexGrow: 1 }}
    keyboardShouldPersistTaps="handled"
    pinchGestureEnabled={false}
    keyboardDismissMode="none"
    keyExtractor={item => `${item.replyUID}reply`}
    showsVerticalScrollIndicator={false}
    renderItem={({ item }) => (
      <RenderReplyItem
        item={item}
      />
    )}
    onScroll={handleScroll}
    ref={setRef}
    scrollEventThrottle={16}
  />

export default class RenderReplyItem extends PureComponent {
  render() {
    const {
      item,
    } = this.props;

    return (
      <View style={[styles.replyContainer, { alignSelf: 'center', transform: [{ scaleY: -1 }] }]}>
          <View style={styles.replyBackground}
          >
              <Text style={styles.replyContentStyle}
              >
                {item.content}
              </Text>
            <View style={styles.replyBottom}>
              <Text style={styles.replyregisterDate}>
                {item.replyUID}
              </Text>
          </View>
          </View>
      </View>
    );
  }
}

Экран становится белым после того, как было визуализировано 80 элементов.

Затем снова прокрутите вниз, и экран вернется, а прокрутка будет перемещаться случайным образом.

Другие плоские списки испытывали подобное явление и исчезали после установки keyExtractor. Однако только после этой страницы то же самое происходит после установки keyExtractor.

1 Ответ

...