react-navigation / react-navigation/react-navigation
Custom tabBar function + position: absolute is not clickable on Android
オープン
まだ誰も着手していません。
bug
package:bottom-tabs
platform:android
repro provided
- 主要言語
- TypeScript
- スター
- 24.5k
- フォーク
- 5.1k
- 平均マージ
- 1日 5時間
- マージ済み PR（30日）
- 18
説明
Current behavior
<Tab.Navigator
tabBar={props => <CustomTabBar {...props} />}
screenOptions={{
tabBarStyle: {
position: "absolute",
}
}}>
Android cannot click on any bottom tab.
iOS and web can click on both.
Expected behavior
All platforms behave the same.
Reproduction
https://snack.expo.dev/@mike_tt/bottom-tabs---absolute
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/bottom-tabs | 6.3.1 |
| react-native-safe-area-context | 3.3.2 |
| react-native-screens | 3.8.0 |
| expo | 43.0.0 |
| @react-navigation/native | 6.0.10 |
| @react-navigation/drawer | 6.4.1 |
| @react-navigation/material-bottom-tabs | 6.2.1 |
| @react-navigation/material-top-tabs | 6.2.1 |
| @react-navigation/stack | 6.2.1 |
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず、リンクされた Expo Snack で、@react-navigation/bottom-tabs、カスタム tabBar、position: "absolute" を使って Android の動作を再現します。iOS および web と比較し、その後、タブ操作を担っている bottom-tabs の実装を追跡します。完了の条件は、報告されている他のプラットフォームと同様に、Android ですべての下部タブをクリックできることです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100