Question

我正在使用FlatList编写无限滚动，但是它一直向我的服务器发送请求。请参见代码打击。我找不到任何文章澄清何时加载下一页，究竟将触发onEndReached。

import React, { Component } from 'react';
import { View, Text, FlatList, StyleSheet, ActivityIndicator, AsyncStorage } from 'react-native';
import { connect } from 'react-redux';
import { loadOrders } from '../redux/modules/Order';
import OrderListItem from './OrderListItem';
import { forOwn, isEmpty, reduce } from 'lodash';

class OrderList extends Component {
   constructor(props) {
    super(props);

    this.state = {
      page: 1,
      error: null,
    };
  }

  componentDidMount() {
       this.loadOrders();
  }

  loadOrders = () => {
    const { page } = this.state;

    AsyncStorage.getItem("userToken")
    .then((value) => {
         return  `Bearer ${value}`;
    })
    .then((userToken) => {
      return this.props.loadOrders(page, { Authorization: userToken });
    })
    .then((response) => {
      this.setState({
        error: response.error || null,
      });
    })
    .catch(error => {
      this.setState({ error});
    })
    ;
  }

  handleLoadMore = () => {
    this.loadOrders();
  };

  onPressItem = (id: string) => {

  };

  keyExtractor = (item, index) => `order-item-${item.id}`;

  renderItem = ({item}) => (
    <OrderListItem
      order={item}
      onPressItem={this.onPressItem}
    />
  );

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "86%",
          backgroundColor: "#CED0CE",
          marginLeft: "14%"
        }}
      />
    );
  };


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

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

  render() {
    const { orders} = this.props;

    if (orders.length> 0) {
      return (
      <View containerStyle={styles.container} >
        <FlatList
          data={orders}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
          ListFooterComponent={this.renderFooter}
          ItemSeparatorComponent={this.renderSeparator}
          onEndReached={this.handleLoadMore}
          onEndReachedThreshold={0.5}
        />
      </View>
    );
    }

    return <View>
      <Text>empty</Text>
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderTopWidth: 0,
    borderBottomWidth: 0
  },
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc'
  }
});

const mapStateToProps = state => {
  let order = state.get('order').toJS();

  return {
    orders: isEmpty(order.entities) ? [] : reduce(order.entities, (result, value) => {
      result.push({ key: value.id, ...value });

      return result;
    }, []),
    loading: order.loading
  };
};

const mapDispatchToProps = {
  loadOrders
};

export default connect(mapStateToProps, mapDispatchToProps)(OrderList);

if部分为false，但仍然调用onEndReached方法，我一定疯了。

Answer 1

更改此

 onEndReachedThreshold={0.5}

对此：

 onEndReachedThreshold={0}

现在，您正在呼叫中途到达的终点。您也可以尝试将其添加到FlatList：

legacyImplementation = {true}

如果仍然无法使用，我建议您在onRefresh上执行“拉”操作。一个适合您的示例：https://www.youtube.com/watch?v=pHLFJs7jlI4

Answer 2

我也遇到了这个问题，

renderFooter加载时会渲染null（height：0），但是加载时会渲染ActivityIndicator，并且ActivityIndicator的高度大于0（null的高度）

当高度从0更改为ActivityIndicator的高度时，它将再次调用onEndReached

您说如果该部分为假，我认为是因为它不是真的假。

当代码真正在FlatList中真正运行时，if部分为true，因此它调用onEndReached，然后_scrollMetrics.contentLength或this._sentEndForContentLength由于某些原因已更改在Chrome控制台之前。 这使得if部分返回false

以上是我目前的全部想法，我仍在调试此问题，希望此答案对您有帮助

为什么FlatList会一直持续加载？

2 个答案: