callstack / callstack/react-native-pager-view

Render PagerView inside a FlatList

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

Beschreibung

## Ask your Question
Hi, Thank you so much for the great lib!

I have a hard time rendering a PagerView as an item of a FlatList. PagerView just won't show.
It is working when I replace FlatList with a ScrollView. Would love to see a PagerView working inside a renderItem function.

Here is a simple repro :

```
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
import PagerView from 'react-native-pager-view'

const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];

const Item = ({ title }) => (


{title}


{title}


);

const Test = () => {
const renderItem = ({ item }) => (

);

return (

item.id}
/>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});

export default Test;
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die bereitgestellte React Native-Reproduktion auszuführen und das Verhalten von PagerView innerhalb von FlatList mit dem beschriebenen ScrollView-Fall zu vergleichen. Verfolge den Rendering-Pfad von PagerView und überprüfe, ob der Pager sichtbar wird, wenn er aus dem renderItem von FlatList verwendet wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

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