react / react/react-native

React Native ScrollView Empty Space (flexGrow behaviour)

Đang mở
#43,138 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Component: ScrollView Issue: Author Provided Repro Newer Patch Available
Ngôn ngữ chính
C++
Star
127k
Fork
25.3k
Merge trung bình
1 ngày 23 giờ
Pull request đã merge (30 ngày)
4

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu bằng cách chạy Expo Snack được liên kết trên thiết bị Android và so sánh hành vi của ScrollView với Array(5) và Array(15). Truy tìm hành vi của ScrollView và flexGrow trong React Native 0.72 chịu trách nhiệm cho khoảng trống màu đỏ. Hoàn thành khi nội dung ngắn kết thúc ngay phía trên vùng màu xanh lá, còn nội dung dài hơn mở rộng đến ranh giới rồi cuộn.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.