当页面加载react-native-web中时，在flatlist中运行的orendreach

Question

我一直在尝试无限滚动在React天然中。目的是总体加载400个项目，并每次使用用户击中Flatlist元素的底部时加载20个项目。在React-Native-Web中，发生的事情是OnEndReach一直在运行，直到所有400个元素都加载为止。我将OnEndReachedThreshold设置为0.1（我认为这意味着当用户距离列表底部不到10％时，触发更多数据）。我不确定如何将其加载20个元素并在用户与flatlist交互时加载其余元素。我在下面分享了我的代码。

import * as React from 'react';
import { Text, View, StyleSheet, FlatList, ActivityIndicator } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {

  const [pageResults, setPageResults] = React.useState([])
  const [page, setPage] = React.useState(1)
  const [loading, setLoading] = React.useState(false)
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    setLoading(true) 
    fetch(`https://randomuser.me/api/?page=${page}&results=20`).then(res => res.json()).then(res => {
        const results = res.results

        setPageResults([...pageResults, ...results])
        setCount(count + 20) 
        setLoading(false)

        console.log(page)
    })

  }, [page])
 

  const renderItem = ({ item }) => {
    return (
      <View key={item.name} style={styles.listItem}>
        <Text>{item.name.first}</Text>
      </View>
    )

  } 


  return (
    <View style={styles.container}>
      <FlatList
        data={pageResults}
        style={styles.list}
        renderItem={renderItem} 
        onEndReachedThreshold={0.1}
        onEndReached={({ distanceFromEnd }) => {
          if (count < 400 && !loading) {
              setPage(page + 1)
          } 
          }} 
        ListFooterComponent={loading && <ActivityIndicator />} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  list: {
    width: "100%",
    height: "100%"
  },
  listItem: {
    width: "100%",
    height: "40px",
    padding: "8px",
    alignItems: "flexStart",
  },
});

Answer 1

我也有类似的问题，我的flatlist在orendreached上启动了该功能，始终在应用程序的开头，即使我将最低的orendreachedthressedthreshold放置在开始时仍在启动。就我而言，这是设计的东西，我在底部增加了一些余量，并且正常工作。