react native 中 flatList 的性能问题

Question

我尝试过 flatlist，但它在 android 中存在一些性能问题。

1. 当我向下滚动时，它会加载列表。但之后，它在向上滚动时显示为空白。

2. 到达屏幕末尾后，它会停止一段时间，然后加载数据。为什么底部没有显示加载器（活动指示器）？为什么 onEndReached 和 onEndReachedThreshold 不起作用？

请看视频here

https://youtu.be/5tkkEAUEAHM

我的代码：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
  ActivityIndicator,
} from 'react-native';
import { List, ListItem, SearchBar } from "react-native-elements";

export default class FlatListExample extends Component
{
constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false,
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const { page, seed } = this.state;
    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
    console.log('url', url);
    this.setState({ loading: true });

    setTimeout(()=>{
      fetch(url)
        .then(res => res.json())
        .then(res => {
          this.setState({
            data:  [...this.state.data, ...res.results],
            error: res.error || null,
            loading: false,
            refreshing: false
          });
        })
        .catch(error => {
          this.setState({ error, loading: false });
        });
    },0);

  };

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE"
        }}
      >
        <ActivityIndicator animating size="large" />
      </View>
    );
  };

handleLoadMore = () =>{
  this.setState({
    page:this.state.page + 1,
  },()=>{
    this.makeRemoteRequest();
  })
}
  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          <ListItem
            roundAvatar
            title={`${item.name.first} ${item.name.last}`}
            subtitle={item.email}
            avatar={{ uri: item.picture.thumbnail }}
          />
        )}
        keyExtractor={item => item.email}
        ListFooterComponent={this.renderFooter}
        onEndReached={this.handleLoadMore}
        onEndReachedThreshold={50}
      />
    );
  }
}

AppRegistry.registerComponent('FlatListExample', () => FlatListExample);

Answer 1

我注意到您没有设置initialNumToRender。来自文档：

initialNumToRender: 数字

在初始批次中渲染多少项目。这应该足够了 填满屏幕，但仅此而已。请注意，这些项目永远不会 作为窗口渲染的一部分卸载以改进 滚动到顶部操作的感知性能。

因此，您需要估计在任何给定时间您希望可见的单元格数量并将其设置为该值。如果您还没有更新到最新的 react-native，我也建议您更新，其中包括对 FlatList 组件的各种改进。