react / react/react-native

React Native ScrollView Empty Space (flexGrow behaviour)

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

还没有人认领这个 Issue。

Component: ScrollView Issue: Author Provided Repro Newer Patch Available
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

Description

Please refer to attached images for context.

The issue is that the ScrollView component has added extra spacing at the bottom which is coloured red; this should not be there. The expected behaviour is that the green area is directly below the ScrollView content (blue); the red should never exist.

The blue area is not scollable when there is enough room and should become scrollable when there's not enough room.

Images 2 and 3 are the expected behaviour.

Steps to reproduce
  1. Run the attached expo snack and run on an Android device
  2. See how there is red, this should not be there and the green should be directly below the blue
  3. Change Array(5) to something larger like 15; blue expands until green has hit the bottom. Blue now becomes scrollable; this is expected.
  4. The ScrollView has the style red to illustrate that the ScrollView is filling the space regardless of it's content.`
React Native Version

0.72.4

Affected Platforms

Runtime - Android

Output of npx react-native info
System:
  OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
  CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
  Memory: 33.04 GB / 62.00 GB
  Shell:
    version: 5.0.17
    path: /bin/bash
Binaries:
  Node:
    version: 21.4.0
    path: /home/linuxbrew/.linuxbrew/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.14.0/bin/yarn
  npm:
    version: 10.2.4
    path: /home/linuxbrew/.linuxbrew/bin/npm
  Watchman:
    version: 20230430.125247.0
    path: /usr/local/bin/watchman
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 11.0.21
    path: /usr/bin/javac
  Ruby:
    version: 2.7.0
    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.10
    wanted: 0.72.10
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: false
  newArchEnabled: Not found
Stacktrace or Logs
NA.
Reproducer

https://snack.expo.dev/@c-gibson-emesent/honest-red-scones

Screenshots and Videos

Image 1: Current behaviour when ScrollView is not scrollable
image1

Image 2: Expected look / behaviour when the ScrollView is not scrollable
image2

Image 3: How it should look when the items expand the ScrollView until there's no more room and the ScrollView becomes scrollable
image3

贡献指南

打开贡献指南

从这里开始

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

调研方向

首先在 Android 设备上运行链接的 Expo Snack,并比较使用 Array(5) 和 Array(15) 时 ScrollView 的行为。追踪 React Native 0.72 中导致红色空白区域的 ScrollView 和 flexGrow 行为。完成的标准是:短内容恰好在绿色区域上方结束,而较长内容扩展到边界后再滚动。

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

评估

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

把新 issue 发到你的邮箱

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