callstack / callstack/react-native-pager-view
Multiple pages per image in Android
- Lingua principale
- TypeScript
- Stelle
- 3.4k
- Fork
- 476
- Merge medio
- 10g 21h
- PR unite (30g)
- 2
Descrizione
## 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.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia con la riproduzione di InlinePhotoGallery e confronta il comportamento su Android con il caso funzionante su iOS, concentrandoti su come PagerView conta ImageBackground e l’Image annidato al suo interno. Riproduci la demo con e senza il wrapper View; il lavoro è completato quando Android tratta ogni immagine e il relativo sfondo come un’unica pagina senza richiedere il wrapper.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- android, react-native, typescript
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 45/100