ReactNativeFlatlist沒有加載所有資料

我有一個包含 100 多個操作的 actionList.js 檔案。我從不同的檔案匯入動作串列 我遇到的問題是有時我的 Flatlist 會加載并顯示 actionList 中的所有專案，有時它只顯示幾個。有時它只會顯示動作串列中的 10 個動作。我必須不斷重繪 應用程式才能顯示完整串列

//ActionList.js

const ActionList = [
    {
      title: 'Folder',
      icon: 'folder',
      action: 'folder',
    },
    {
      title: 'Record',
      icon: 'record',
      action: 'Record',
    },
    {
      title: 'Pause',
      icon: 'pause',
      action: 'pause',
    }
 .... a hundred more items
]

// show.js

const [data, setData] = useState([]);

  useEffect(() => {
    ActionListService.getList()
      .then((results) => {
        setData(results);
        setFullData(results);
      })
      .catch((err) => {});
  }, []);

  <View
        style={{paddingLeft: insets.left, paddingRight: insets.right, flex: 1}}>
        <FlatList
          data={data}
          numColumns={screen.orientation === 'Portrait' ? 1 : 3}
          key={screen.orientation === 'Portrait' ? 1 : 3}
          keyExtractor={(item) => item.title}
          renderItem={({item}) => (
            <List.Item
              onPress={() => createAction(item.action)}
              // eslint-disable-next-line react-native/no-inline-styles
              style={{
                width: screen.orientation === 'Portrait' ? '100%' : '30%',
              }}
              title={item.title}
              left={() => <List.Icon icon={item.icon} />}
            />
          )}
        />
      </View>

uj5u.com熱心網友回復：

您應該使用onEndReachedof 的屬性Flatlist并傳遞一個函式，在該函式中每次滾動加載更多專案。

const [dataSlice, setDataSlice] = useState<object[]>([]);
  const [pageNumber, setPageNumber] = useState<number>(0);

// Code for loading only the first 10 and then each time user scrolls 10 more...
  const loadMore = () => {
    const ITEMS_PER_PAGE = 10; // what is the batch size you want to load.
    setPageNumber((prev) => prev   1);
    const start = pageNumber * ITEMS_PER_PAGE;
    const end = (pageNumber   1) * ITEMS_PER_PAGE - 1;

    const newData = data && data.slice(start, end); // here, we will receive next batch of the items
    setDataSlice([...dataSlice, ...newData]); // here we are appending new batch to existing batch
  };


<FlatList
          data={data}
          numColumns={screen.orientation === 'Portrait' ? 1 : 3}
          key={screen.orientation === 'Portrait' ? 1 : 3}
          keyExtractor={(item) => item.title}
          renderItem={({item}) => (
            <List.Item
              onPress={() => createAction(item.action)}
              // eslint-disable-next-line react-native/no-inline-styles
              style={{
                width: screen.orientation === 'Portrait' ? '100%' : '30%',
              }}
              title={item.title}
              left={() => <List.Icon icon={item.icon} />}
            />
          )}
           onEndReached={loadMore} // THIS HERE !
        />

uj5u.com熱心網友回復：

如果您使用靜態檔案來提供 FlatList 并且有時它不顯示，則問題可能與您嘗試加載的檔案的設備和大小有關。

作為需要具有更好性能的串列的提議，可以使用這些包來代替 FlatList！：

• 回收者串列視圖
• recyclerlistview-gridlayoutprovider
• @gifyourgame/recyclerlistview

我的推薦是第一個！

標籤：反应式

上一篇：如何解決undefinedisnotanobject(evaluate'route.params.data')inreactnative？

下一篇：為什么我得到失敗的道具型別：提供給“LottieView”的“object”型別的無效道具“onAnimationFinish”，需要一個“功能”