Question

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

当我向下滚动时，它会加载列表。但之后，它向上滚动时显示空白。
到达屏幕末尾后，它会暂停一段时间，然后加载数据。为什么不在底部显示加载器（活动指示器）？为什么onEndReached和onEndReachedThreshold不起作用？

Plz看一下视频here

我的代码：

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

反应原生中flatList的性能问题

1 个答案: