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 为未呈现的字段呈现空白空间......很奇怪！