entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://facebook.github.io/react-native/docs/flatlist#initialnumtorender|blocks|key|c2dmj|text|您应该设置以下属性|unstyled|depth|inlineStyleRanges|entityRanges|fo1fk|initialNumToRender={50}|code-block|syntax|javascript|1tkc3|因为默认值是10|7vm1f|来源：https://facebook.github.io/react-native/docs/flatlist#initialnumtorender|offset|length|6505t^0|0|0|0|3|20|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|U|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|V|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|W|G|@]|H|@]|6|$]]|$A|P|C|Q|2|E|F|X|G|@]|H|@$R|Y|S|Z|A|10]]|6|$]]|$A|T|C|-4|2|E|F|11|G|@]|H|@]|6|$]]]]

You should set following property

<pre><code>initialNumToRender={50}
</code></pre>

As the default is 10

Source: 
<a href="https://facebook.github.io/react-native/docs/flatlist#initialnumtorender" rel="noreferrer">https://facebook.github.io/react-native/docs/flatlist#initialnumtorender</a>

entityMap|blocks|key|m81t|text|将视图更改为ScrollView|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1ukbj|更新的代码：|82m|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>
);|code-block|syntax|javascript|bmfej^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|L|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|M|9|@]|A|@]|B|$H|I]]|$2|J|4|-4|6|7|8|N|9|@]|A|@]|B|$]]]]

Change View to ScrollView

Updated Code:

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

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://github.com/facebook/react-native/issues/15990#issuecomment-469268244|blocks|key|cr0vn|text|使用initialNumToRender不是一个合适的解决方案。它会影响处理，因为整个列表都是由flatList呈现的。如果你在项目中的任何地方使用动画，那么你可以在Animated.timing()中添加isInteraction:+false参数，例如-|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|va28|Animated.timing(
++++this.spinValue,
++++{
++++++toValue:+-1,
++++++duration:+4000,
++++++easing:+Easing.linear,
++++++isInteraction:+false
++++}
++).start(+()=>+this.spin()+)|code-block|syntax|javascript|eemdn|有关更多信息，您可以在react-native项目的问题中查看this注释。|9dthc|希望这能对你有所帮助！|1lrq6^0|1C|8|2B|H|2V|K|0|0|V|4|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|W|G|@$H|X|I|Y|J|K]|$H|Z|I|10|J|K]|$H|11|I|12|J|K]]|L|@]|6|$]]|$A|M|C|N|2|O|F|13|G|@]|L|@]|6|$P|Q]]|$A|R|C|S|2|E|F|14|G|@]|L|@$H|15|I|16|A|17]]|6|$]]|$A|T|C|U|2|E|F|18|G|@]|L|@]|6|$]]|$A|V|C|-4|2|E|F|19|G|@]|L|@]|6|$]]]]

Using initialNumToRender is not a proper solution for this. It affects the processing as the whole list is rendered by <code>flatList</code>.
If you're using animation anywhere in your project then you can add <code>isInteraction: false</code> parameter in <code>Animated.timing()</code>
eg-

<pre><code>Animated.timing(
 this.spinValue,
 {
 toValue: -1,
 duration: 4000,
 easing: Easing.linear,
 isInteraction: false
 }
 ).start( ()=&gt; this.spin() )
</code></pre>

for more information, you can see <a href="https://github.com/facebook/react-native/issues/15990#issuecomment-469268244" rel="nofollow noreferrer">this</a> comment in react-native project's issues.

Hope this will help you!

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://stackoverflow.com/a/56050994/2860309|blocks|key|m1me|text|我也在努力解决同样的问题，在这些答案中唯一起作用的是Arjun+Jain's，但是当你这样做的时候，FlatList不再能确定要呈现的项目的正确数量，并且不再有效(在我的例子中，项目列表是2000%2B条目，所以这很重要)。|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|4imb3|经过大量的修改之后，我的代码中缺少的是呈现的元素(在本例中是CardImage，在我的代码中是ListItem)只需要一个item属性：|fb50d|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>
);|code-block|syntax|javascript|6eda^0|1E|8|Q|C|0|0|U|9|1B|8|1P|4|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|U|G|@$H|V|I|W|J|K]]|L|@$H|X|I|Y|A|Z]]|6|$]]|$A|M|C|N|2|E|F|10|G|@$H|11|I|12|J|K]|$H|13|I|14|J|K]|$H|15|I|16|J|K]]|L|@]|6|$]]|$A|O|C|P|2|Q|F|17|G|@]|L|@]|6|$R|S]]|$A|T|C|-4|2|E|F|18|G|@]|L|@]|6|$]]]]

I was struggling with the same problem, the only thing that worked from amongst these answers was <a href="https://stackoverflow.com/a/56050994/2860309">Arjun Jain's</a> but the moment you do that the <code>FlatList</code> can no longer determine the correct number of items to render and ceases to be efficient (and in my case, the list of items is 2000+ entries so this matters).
After loads of fiddling, what turned out to be missing in my code was that the rendered element (in this case, <code>CardImage</code>, in mine it was a <code>ListItem</code>) just needs an <code>item</code> attribute:
<pre><code>return (
 &lt;SafeAreaView&gt;
 &lt;Text&gt;{this.state.cards.length}&lt;/Text&gt;
 &lt;FlatList
 data={this.state.cards}
 renderItem={(theInfo) =&gt; &lt;CardImage item={theInfo} key={theInfo.key} info={theInfo}/&gt;}
 keyExtractor={(item, index) =&gt; item.toString()}
 /&gt;
 &lt;/SafeAreaView&gt;
);
</code></pre>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://stackoverflow.com/a/56050994/2860309|blocks|key|adej2|text|将React+Native从版本62更新到64后出现此问题。我的解决方案是在没有要显示的元素时隐藏FlatList。|unstyled|depth|inlineStyleRanges|entityRanges|82oj|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>
);|code-block|syntax|javascript|6l4c1|Arjun+Jain's解决方案也解决了这个问题。|offset|length|27ejt^0|0|0|0|C|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|S|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|T|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|U|G|@]|H|@$P|V|Q|W|A|X]]|6|$]]|$A|R|C|-4|2|E|F|Y|G|@]|H|@]|6|$]]]]

The issue appeared after updating React Native from version 62 to 64. My solution was to hide the FlatList when there are not elements to show.
<pre><code>return (
 &lt;View&gt;
 &lt;Text&gt;{this.state.cards.length}&lt;/Text&gt;
 {this.state.cards.length &gt; 0 &amp;&amp;
 &lt;FlatList
 data={this.state.cards}
 renderItem={(theInfo) =&gt; &lt;CardImage key={theInfo.key} info={theInfo}/&gt;}
 keyExtractor={(item, index) =&gt; item.toString()}
 /&gt;
 }
 &lt;/View&gt;
);
</code></pre>
Also <a href="https://stackoverflow.com/a/56050994/2860309">Arjun Jain's</a> solution fixes the issue.

I'm trying to display a FlatList with a dataset of 86 items and it's only displaying 10 and will not load more.

I tried messing with the container size through styles but no avail.

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

I expect this to display 86 items (this.state.cards.length displays 86), the application only displays 10 and will not load more.

Edit: rn version 0.57.8

React Native FlatList only renders 10 items

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试显示一个包含86个项目的数据集的FlatList，但它只显示10个项目，并且不会加载更多项目。 我试着通过样式来调整容器的大小，但是没有效果。 return ( <View> <Text>{this.state.cards.length}</Text> <FlatList data={this.state.cards} renderItem={(the

问React原生FlatList仅呈现10个项目
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React原生FlatList仅呈现10个项目EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React原生FlatList仅呈现10个项目
EN