Question

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

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

其他FlatList经历了类似的现象，并且在设置keyExtractor后消失了。但是，只有在此页面之后，设置keyExtractor后才会发生同样的事情。

Answer 1

duplicate of

alternative of flatlist in react-native with much improved performance

For improving flatlist performance tips see here

ReactNative-渲染多个项目时，FliatList变成白色屏幕

1 个答案: