callstack / callstack/react-native-pager-view

Multiple pages per image in Android

オープン
#555 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
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

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

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