callstack / callstack/react-native-bottom-tabs

Measuring custom tab bar height fails for absolutely‑positioned elements

Đang mở
#380 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
1.5k
Fork
109
Merge trung bình
11 giờ 44 phút
Pull request đã merge (30 ngày)
8

Mô tả

### Before submitting a new issue

- [x] I tested using the latest version of the library, as the bug might be already fixed.
- [x] I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native.
- [x] I checked for possible duplicate issues, with possible answers.

### Bug summary

When using a custom tab bar with [react-native-bottom-tabs](https://github.com/react-navigation/react-native-bottom-tabs), the library measures the tab bar height like this(in `TabView`):

```js
useLayoutEffect(() => {
if (renderCustomTabBar && customTabBarWrapperRef.current) {
customTabBarWrapperRef.current.measure((_x, _y, _width, height) => {
setTabBarHeight(height);
});
}
}, [renderCustomTabBar]);

// …

{renderCustomTabBar ? (

{renderCustomTabBar()}

) : null}
```

This works for most layouts, but **breaks** whenever the returned element is **absolutely positioned**, since absolutely‑positioned children don’t contribute to their parent’s measured size.

### Library version

0.0.13

### Environment info

```shell
I use expo
```

### Steps to reproduce

1. Set up a bottom‑tabs navigator.

2. Provide a `renderCustomTabBar` that returns:

```jsx

{/* … */}

```

3. Observe that `setTabBarHeight` is called with `0` (or an incorrect value).

### Reproducible sample code

```js
none
```

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

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

Hướng nghiên cứu

Bắt đầu từ mã TabView được hiển thị trong issue và kiểm tra phép đo customTabBarWrapperRef trong useLayoutEffect. Tái hiện cấu hình bottom-tabs với thanh tab tùy chỉnh được định vị tuyệt đối như mô tả trong các bước, sau đó xác minh rằng chiều cao đo được không còn bằng 0 hoặc không chính xác. Issue không cung cấp mẫu có thể tái hiện hoặc tệp kiểm thử, vì vậy hãy tìm các bài kiểm thử hoặc điểm vào liên quan của TabView trước khi quyết định có thể đạt được mức độ bao phủ nào.

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, typescript
Lĩnh vực
mobile-dev
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 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
35/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.