react-navigation / react-navigation/react-navigation

onScroll of previous page triggered when page is changed by press the bottom tab bar

オープン
#10,063 コメント 3 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

bug package:bottom-tabs platform:ios repro provided
主要言語
TypeScript
スター
24.5k
フォーク
5.1k
平均マージ
1日 5時間
マージ済み PR(30日)
18

説明

Current behavior

This bug only occurs in IOS, not for android
For example,
when you have a <Tab.Navigator> with two <Tab.Screen>
Let say you are currently on a Screen, say Screen 1, you have a with a onScroll props and a callback inside Screen 1,
When you press the Tab Bar Icon and jump to other Tab Screen, say Screen 2,
When the Screen 2 is shown and rendered,
The onScroll pf Screen 1 is magically called without any reason,
The same applies to onMomentumScrollEnd

Expected behavior

The previous screen onScroll callback should not be triggered when screen change by pressing tab bar

Reproduction

https://snack.expo.dev/@robertli93/bug

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

{
"dependencies": {
"react-native-screens": "~3.4.0",
"react-native-tab-view": "^3.0.0",
"react-native-pager-view": "5.0.12",
"react-native-reanimated": "~2.2.0",
"@react-navigation/native": "6.0.2",
"@react-navigation/elements": "1.0.4",
"react-native-gesture-handler": "~1.10.2",
"@react-navigation/bottom-tabs": "6.0.9",
"react-native-safe-area-context": "3.2.0"
}
}

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

リンクされた Snack の再現から始め、2 つの下部タブ画面を切り替えたときの iOS 固有の挙動を確認します。@react-navigation/bottom-tabs と、一覧にある React Native のナビゲーション依存関係を調査し、前の画面のコールバックが実行される理由を特定します。タブを切り替えた後に、前の画面の onScroll および onMomentumScrollEnd コールバックが実行されなくなれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native, typescript
領域
mobile
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。