callstack / callstack/react-native-pager-view

ViewPager layout breaks when detaching and attaching it again

オープン
#122 コメント 4 件 リアクション 7 件 担当者 0 名 GitHub で見る
android bug
主要言語
TypeScript
スター
3.4k
フォーク
476
平均マージ
10日 21時間
マージ済み PR(30日)
2

説明

## Environment info

```sh
react-native: 0.61.5
```

Library version: `3.2.0`

## Steps To Reproduce

See the issue:

![pager-detach-broken](https://user-images.githubusercontent.com/774577/70314278-72597080-1817-11ea-85d8-49f9945809e4.gif)

## Reproducible sample code

Repro: https://github.com/ferrannp/react-native-viewpager-detach-example

When navigating to another screen with `react-navigation` (e.g to another tab), `onDetachedFromWindow` is called. When we come back to the view that has the `ViewPager`, this code is called:

https://github.com/react-native-community/react-native-viewpager/blob/master/android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPager.java#L212-L219

However, it seems to be called too late and the Pager gets broken. I tried the following solution:

```java
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
// The viewpager reset an internal flag on this method so we need to run another layout pass
// after attaching to window.
this.requestLayout();
// CODE CHANGES BELOW
measure(
MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
layout(getLeft(), getTop(), getRight(), getBottom());
}
```

And it works. However, I am not sure this is the best solution. I know @kmagiera did something similar before with Pager so I am just CCing you here. Maybe @satya164 @NoemiRozpara you found this before when working with react-navigation and ViewPager? I'll also CC @ruiaraujo which implemented this piece of code 2 years ago 😄 .

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

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

調査の方向性

リンク先の行にある android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPager.java から始め、提供されている react-native-viewpager-detach-example を使って detach/attach のフローを再現します。既存の onAttachedToWindow の動作を、報告されている measure と layout のシーケンスと比較します。画面遷移して戻った後も ViewPager が正しくレイアウトされたままであれば完了です。

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

評価

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

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

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