React Native FlatList 只渲染 10 個項目

Question

我正在嘗試顯示一個包含 86 個項目的數據集的 FlatList，它只顯示 10 個並且不會加載更多。

我嘗試通過 styles 弄亂容器大小，但無濟於事。

return (
  <View>
    <Text>{this.state.cards.length}</Text>
    <FlatList
      data={this.state.cards}
      renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
      keyExtractor={(item, index) => item.toString()}
    />
  </View>
);

我希望它顯示 86 個項目（this.state.cards.length 顯示 86），應用程序只顯示 10 個並且不會加載更多。

編輯：rn 版本 0.57.8

Answer 1

您應該設置以下屬性

initialNumToRender={50}

因為默認是 10

來源： https : //facebook.github.io/react-native/docs/flatlist#initialnumtoender

Answer 2

將視圖更改為 ScrollView

更新代碼：

return (
  <ScrollView>
    <Text>{this.state.cards.length}</Text>
    <FlatList
      data={this.state.cards}
      renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
      keyExtractor={(item, index) => item.toString()}
    />
  </ScrollView>
);

Answer 3

使用 initialNumToRender 不是一個合適的解決方案。 它會影響處理，因為整個列表由flatList呈現。 如果您在項目中的任何地方使用動畫，那么您可以在Animated.timing()添加isInteraction: false參數，例如-

Animated.timing(
    this.spinValue,
    {
      toValue: -1,
      duration: 4000,
      easing: Easing.linear,
      isInteraction: false
    }
  ).start( ()=> this.spin() )

有關更多信息，您可以在 react-native 項目的問題中看到此評論。

希望能幫到你！

Answer 4

我正在為同樣的問題苦苦掙扎，這些答案中唯一有效的是Arjun Jain 的，但是當您這樣做時， FlatList無法再確定要呈現的正確項目數並且不再有效（在我的情況下，項目列表是 2000 多個條目，所以這很重要）。

經過大量的擺弄之后，我的代碼中缺少的是渲染元素（在本例中為CardImage ，在我的中為ListItem ）只需要一個item屬性：

return (
  <SafeAreaView>
    <Text>{this.state.cards.length}</Text>
    <FlatList
      data={this.state.cards}
      renderItem={(theInfo) => <CardImage item={theInfo} key={theInfo.key} info={theInfo}/>}
      keyExtractor={(item, index) => item.toString()}
    />
  </SafeAreaView>
);

Answer 5

將 React Native 從版本 62 更新到 64 后出現了該問題。我的解決方案是在沒有要顯示的元素時隱藏 FlatList。

return (
  <View>
   <Text>{this.state.cards.length}</Text>
   {this.state.cards.length > 0 &&
   <FlatList
     data={this.state.cards}
     renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
     keyExtractor={(item, index) => item.toString()}
   />
   }
  </View>
);

Arjun Jain 的解決方案也解決了這個問題。

Answer 6

我以不同的方式解決了我的問題，也許它可以幫助某人......

對我來說，設置initialNumToRender={50}並沒有解決所有問題，它導致了另一個問題。

要修復它，就我而言，我有：

    renderItem({ item }) {
    return <MyButton 
      key={String(item._id)}
      ... other props
    />

在 MyButton 的樣式中，我將其作為容器樣式：

flex: 1
height: 68px;
padding-right: 10px;
margin-top: 15px;
flex-direction: row;

所以我將其更改為：

height: 68px;
padding-right: 10px;
margin-top: 15px;
flex-direction: row;

它是固定的！ flex: 1 ，導致 FlatList 為未呈現的字段呈現空白空間......很奇怪！