callstack / callstack/react-native-pager-view
Multiple pages per image in Android
- 主要言語
- TypeScript
- スター
- 3.4k
- フォーク
- 476
- 平均マージ
- 10日 21時間
- マージ済み PR(30日)
- 2
説明
## Environment
- Tested in `5.4.9` and `5.4.15`
- Android
## Description
I have a simple image gallery code that shows images with a blurred version of the image as a background, the problem is the background and the image itself are treated as different pages, besides being the background the parent of the image.
## Reproducible Demo
The buggy code looks like this:
```tsx
import React from 'react';
import { Image, ImageBackground, View } from 'react-native';
import PagerView from 'react-native-pager-view';
type Props = {
imageUrls: string[];
};
const getResizeMode = (url: string) => {
const query = url.split('?')[1];
const params = new URLSearchParams(query);
const width = params.get('width') || '0';
const height = params.get('height') || '0';
return Number(height) >= Number(width) ? 'contain' : 'cover';
};
const InlinePhotoGallery = ({ imageUrls }: Props): JSX.Element => (
{imageUrls.map((imageUrl) => (
//
//
))}
);
export default InlinePhotoGallery;
```
Here is a screencast of that:
https://user-images.githubusercontent.com/804350/167194160-01f517b1-365a-47db-9c7d-710ef25d4088.mp4
You can see in the code there are two commented lines wrapping the `ImageBackground`, that's actually the workaround I've found, with that, everything looks as expected:
https://user-images.githubusercontent.com/804350/167194441-c1555261-8310-479b-bba7-b254199f3422.mp4
Shouldn't this look good without the wrapper? Worth mentioning again, it works perfectly in iOS without the `View` wrapper.
コントリビューションガイド
調査の方向性
InlinePhotoGallery の再現から始め、Android の動作を、正常に動作する iOS のケースと比較します。ImageBackground とその内部にネストされた Image が PagerView によってどのようにカウントされるかに注目してください。View ラッパーありとなしでデモを再現します。Android が各画像とその背景を 1 つのページとして扱い、ラッパーを必要としなければ完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- android, react-native, typescript
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- 明確に書かれている
- 初心者へのやさしさ
- 45/100