callstack / callstack/react-native-pager-view

Multiple pages per image in Android

Offen
#555 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
3.4k
Forks
476
Ø Merge
10 T. 21 Std.
Gemergte PRs (30 T.)
2

Beschreibung

## 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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der Reproduktion von InlinePhotoGallery und vergleiche das Verhalten unter Android mit dem funktionierenden Fall unter iOS. Konzentriere dich darauf, wie ImageBackground und das darin verschachtelte Image von PagerView gezählt werden. Reproduziere die Demo mit und ohne den View-Wrapper; abgeschlossen ist die Aufgabe, wenn Android jedes Bild und seinen Hintergrund als eine Seite behandelt, ohne den Wrapper zu benötigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
android, react-native, typescript
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.