react / react/react-native

KeyboardAvoidingView mistakingly adds white space on screen bottom after being untangled

Đang mở
#29,614 97 bình luận 61 reaction 0 người được giao Xem trên GitHub

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

API: Keyboard Component: KeyboardAvoidingView Needs: Attention
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]

I wrapped a view as a footer inside KeyboardAvoidingView. It works properly before the keyboard has been untoggled. However, after the keyboard is untoggled, it adds a white space on the bottom of the screen. The height of the white space is as big as the keyboardVerticalOffset. This white space shouldn't exist.

React Native version:

System:
OS: macOS 10.15.6
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Memory: 28.43 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.18.1 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.5 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
Languages:
Java: 14.0.1 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ~16.11.0 => 16.11.0
react-native: https://github.com/expo/react-native/archive/sdk-38.0.1.tar.gz => 0.62.2
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Use KeyboardAvoidingView, set keyboardVerticalOffset to any value
  2. Put a view inside KeyboardAvoidingView, set the position as absolute, and set the bottom to 0

Expected Results

The white space for keyboardVerticalOffset should only exist when the keyboard is toggled.

Snack, code example, screenshot, or link to a repository:

<KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      keyboardVerticalOffset={48}
      style={{width: "100%",
                   height: "100%",
                   position: "absolute",
                   zIndex: 1,}}
>
      <View
              style={{width: "100%",
                            position: "absolute",
                            height: 56,
                            bottom: 0,}}
      >
              <SubmitButton/>
       </View>
</KeyboardAvoidingView>

Artboard

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 tái hiện ví dụ KeyboardAvoidingView được cung cấp trên iOS, với behavior được đặt thành padding hoặc height và keyboardVerticalOffset được đặt thành 48. Kiểm tra implementation của KeyboardAvoidingView và xác minh rằng khoảng trống bên dưới chỉ xuất hiện khi bàn phím đang hiển thị, sau đó xác nhận rằng footer được cung cấp với vị trí tuyệt đối hoạt động đúng sau khi bàn phím được ẩ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-dev
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ 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.