callstack / callstack/react-native-pager-view
Multiple pages per image in Android
- 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
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