react / react/react-native

List jumping when sliding using maintainVisibleContentPosition on Android

未关闭
#41,212 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Issue: Author Provided Repro Needs: Triage :mag: Platform: Android
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

Description

I use maintainVisibleContentPosition in the chat list. When sliding to view older chat messages, if a new message (Especially very long messages, exceeding the height of the screen) is inserted into the list, the (android) list will jump, but iOS will not.

I can reproduce it using the latest RN 0.72.6 and wrote a demo.

https://github.com/Rays15/flatlist-demo

https://github.com/facebook/react-native/assets/17613135/d8872f9c-489e-4b83-bcbf-4205191504b7

@janicduplessis Can this be fixed?

React Native Version

0.72.6

Output of npx react-native info

System:
OS: macOS 14.0
CPU: (12) arm64 Apple M2 Max
Memory: 1.95 GB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.15.1
path: ~/.nvm/versions/node/v16.15.1/bin/node
Yarn:
version: 1.22.19
path: ~/.nvm/versions/node/v16.15.1/bin/yarn
npm:
version: 8.11.0
path: ~/.nvm/versions/node/v16.15.1/bin/npm
Watchman:
version: 2023.08.14.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10406996
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.20
path: /Users/rays/.sdkman/candidates/java/current/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.6
wanted: 0.72.6
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Steps to reproduce

https://github.com/Rays15/flatlist-demo

Snack, screenshot, or link to a repository

https://github.com/Rays15/flatlist-demo

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

首先使用 React Native 0.72.6 运行链接的 flatlist-demo,并在滑过较旧消息时复现 Android 跳动的问题。跟踪 Android 对 maintainVisibleContentPosition 的处理,并将其与 iOS 的行为进行比较。完成标准是:插入一条很长的消息后,Android 上的可见位置不再意外发生变化。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native
领域
mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。