FlatList is not rendering the complete list of items.
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 35/100
- Issue 类型
- 缺陷
- 描述清晰度
- 需要澄清
- 活跃度
- 冷清
- 技术栈
- react-native
- 领域
- mobile
调研方向
首先，使用链接的 Stack Overflow 示例复现 React Native 0.72.4 中所描述的 FlatList 行为，重点关注动态获取的 500–1000 个项目的初始加载以及后续滚动。将初始渲染与状态变更后的行为进行比较；完成的标准是确定一个可复现的原因，并确保完整列表能够渲染，而无需进行更新。
由索引模型根据 Issue 内容生成。
描述
Description
It seems that there is a bug on the react-native flatlist while trying to render a list of items. Sometimes only some of the list items are displayed.
When there are interactions such as state changes, there is an update in the list and all the list items are displayed properly.
React Native Version
0.72.4
Output of npx react-native info
System:
Binaries:
Node:
version: 16.20.0
Yarn:
version: 1.22.19
npm:
version: 8.19.4
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.2
- iOS 16.2
- macOS 13.1
- tvOS 16.1
- watchOS 9.1
Android SDK:
API Levels:
- "23"
- "28"
- "29"
- "30"
- "31"
- "32"
- "33"
- "34"
Build Tools:
- 29.0.2
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
- 34.0.0
Languages:
Java:
version: 11.0.15
Ruby:
version: 2.6.10
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
Steps to reproduce
We are using a FlatList to render a List of 500-1000 items based on a dynamic response. We are updating the states based on navigations and data filter.
However sometimes in the initial load of the page the Flatlist is rendering only 5 items and it is unable to render the remaining items when scrolling down.
When there are state changes after initial load of data, there is an update in the list and all the data items are displayed properly.
Snack, screenshot, or link to a repository
Attaching an example link only for depicting the flatlist configuration we use.
https://stackoverflow.com/questions/77036267/issue-flatlist-rendering-only-few-items-in-the-list
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
react/react-native 的其他 Issue
-
Needs: Triage :mag:
难度 2/5 1-3 小时 新手友好度 82/100
react/react-native#58565 · 1 条评论 · 2 个 reaction ·
-
Needs: Author Feedback Needs: Repro
难度 2/5 1-3 小时 新手友好度 88/100
react/react-native#58555 · 4 条评论 · 1 个 reaction ·
-
Needs: Attention Needs: Repro
难度 2/5 1-3 小时 新手友好度 85/100
react/react-native#58526 · 2 条评论 ·
-
Needs: Author Feedback Needs: Repro
难度 2/5 1-3 小时 新手友好度 85/100
react/react-native#58448 · 1 条评论 ·
-
Needs: Attention Needs: Repro
难度 2/5 半天 新手友好度 82/100
react/react-native#58441 · 2 条评论 ·
查看 react/react-native 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 86/100
-
Sensor initialization takes very long when `--initial-sim-time` is set to current UNIX timestamp 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
gazebosim/gz-sensors#662 · 1 条评论 ·
-
enhancement
难度 2/5 1-3 小时 新手友好度 76/100
-
comp-datalake
难度 2/5 1-3 小时 新手友好度 88/100
ClickHouse/ClickHouse#121222 ·
-
难度 2/5 1-3 小时 新手友好度 68/100
LadybirdBrowser/ladybird#12123 ·