react / react/react-native

Section sticky header in wrong place after list header change until scroll

未关闭
#50,189 12 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Issue: Author Provided Repro Type: New Architecture
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

Description

I migrating to the New Architecture.
I have component which worked fine 7 years on the "old architecture".
It uses Animated.SectionList and can hide content in ListHeaderComponent.
In the New architecture on ListHeaderComponent change: section header (renderSectionHeader) goes to the wrong place until manually scroll a little.

Steps to reproduce
  1. Clone and run https://github.com/Bardiamist/diff/tree/section-list-header

  2. Scroll util red header will stick

  3. Press Hide top content after 1 sec button

  4. Wait 1 second
    Expected result: red header should be in same place

  5. Scroll a little

  6. Press Show content after 1 sec button

  7. Wait 1 second
    Expected result: red header should be in same place

React Native Version

0.78.1

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info
System:
  OS: macOS 15.3.2
  CPU: (10) arm64 Apple M1 Max
  Memory: 11.71 GB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.10.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2025.03.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.22562.218.2431.13114758
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /Users/bardiamist/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.1
    wanted: 0.78.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
Stacktrace or Logs
No crash
Reproducer

https://github.com/Bardiamist/diff/tree/section-list-header

Screenshots and Videos

Works with problem on the New Architecture:

https://github.com/user-attachments/assets/ceef7a7d-3e8e-49c9-83ba-2c402c8ce269

Worked as expected on the "old architecture":

https://github.com/user-attachments/assets/ea9ac31c-c424-494c-9a89-1e09b08b220c

贡献指南

打开贡献指南

从这里开始

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

调研方向

在启用 New Architecture 的 iOS 上运行链接的 section-list-header reproducer,然后检查 ListHeaderComponent 内容被隐藏或显示时 Animated.SectionList 和 renderSectionHeader 的行为。完成的标准是,红色 section header 在两次更改后都保持在相同位置,且不需要手动滚动。

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

评估

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

把新 issue 发到你的邮箱

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