callstack / callstack/react-native-bottom-tabs
Measuring custom tab bar height fails for absolutely‑positioned elements
- 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
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