React Native中FlatList初始仅显示10项，render后加载剩余项的问题

嘿，我来帮你搞定这个FlatList的渲染问题！你现在遇到的“页面加载时只显示10条数据，首次渲染完成后才加载剩余10条”的情况，其实是FlatList的默认优化机制导致的——它自带的initialNumToRender属性会根据屏幕高度和列表项的高度自动计算初始渲染的数量，刚好在你的场景下算出了10条，目的是避免一次性渲染大量数据拖慢页面加载速度。

如果你希望页面加载时就一次性渲染全部20条数据，只需要给FlatList显式设置initialNumToRender属性为20即可：

<FlatList
  data={data}
  keyExtractor={(item, i) => String(i)}
  showsVerticalScrollIndicator={false}
  contentContainerStyle={styles.boardList}
  renderItem={({ item, index }) => <Item {...item}/>}
  initialNumToRender={20} // 强制初始渲染全部20条数据
/>

要是你本身就想保留“先渲染10条，后续加载剩余”的行为，但想精准控制初始渲染的条数，也可以明确设置initialNumToRender={10}，确保每次页面加载都只先渲染10条。

另外，还有几个和FlatList渲染相关的性能属性可以按需调整：

• maxToRenderPerBatch：控制后续批量渲染时每次最多渲染的条数，默认是10
• windowSize：设置视窗上下额外预渲染的列表项数量，用来优化滚动时的流畅度，避免出现空白

根据你的实际需求调整这些属性，就能在性能和用户体验之间找到平衡啦~

内容的提问来源于stack exchange，提问作者Dan