react-native - ReactNative - FliatList 在渲染许多项目时变成白屏

问题描述

安卓：4.4.2、8.0

反应原生：0.61.4

它只发生在安卓上。

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 个项目后屏幕变为白色。

然后再次向下滚动，屏幕将返回，滚动将随机移动。

其他 FlatLists 也出现类似现象，设置后消失keyExtractor。但是，只有在此页面之后，您设置keyExtractor.

标签： react-nativereact-native-androidreact-native-flatlist

react-native - ReactNative - FliatList 在渲染许多项目时变成白屏

问题描述

解决方案

推荐阅读