反应原生中flatList的性能问题

Question

我已经尝试过flatlist但它在android中有一些性能问题.

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

2. 到达屏幕的末尾后,它会停止一段时间,然后加载数据.为什么不在底部显示加载器(活动指示器)？为什么onEndReached和onEndReachedThreshold不起作用？

Plz在这里看一下视频

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组件的各种改进.