callstack / callstack/react-native-pager-view
Why does the PagerView height growth not effect any views that it is nested inside of ?
- Vorherrschende Sprache
- TypeScript
- Sterne
- 3.4k
- Forks
- 476
- Ø Merge
- 10 T. 21 Std.
- Gemergte PRs (30 T.)
- 2
Beschreibung
## Ask your Question
I have a unique situation where I have nested the PagerView inside of a FlatList. Reason for this is the necessity for a sticky header, onEndReached, and more... my issue is that the PagerView does not cause the FlatList that it is nested inside of to grow to the height of its content. This only occurs with PagerView. What do I mean? So as an alternative I used a ScrollView instead of the PagerView, made it horizontal and turned on Pagination, this worked perfectly fine but the scrolling speed is just terrible on iOS so I would much rather use PagerView. Please let me know if theres a way to fix this.
```
const renderInnerLists = useCallback(
({ index }) => {
if (index === 1) {
return
}
if (index === 2) {
return (
)
}
},
[reducedGalleries, galleries]
)
return (
)
}
const styles = StyleSheet.create({
topCont: {
width: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: colors.placeHolder,
},
header: {
position: 'absolute',
top: 0,
},
button: {
width: 100,
marginTop: 5,
height: 30,
borderRadius: 8,
backgroundColor: 'white',
},
outerListStyle: {
minHeight: '100%',
width: width,
backgroundColor: 'white',
borderWidth: 2,
},
innerScrollView: {
width: width,
minHeight: '100%',
},
myGalsContentStyle: {
paddingBottom: 10,
},
innerListCont: {
width: width,
minHeight: '100%',
},
```
Beitragsleitfaden
Rechercherichtung
Reproduziere das gemeldete Beispiel mit einem verschachtelten PagerView innerhalb einer FlatList, einschließlich der minHeight-Stile und des deaktivierten inneren Scrollens, auf iOS und Android. Vergleiche sein Layout-Verhalten mit der horizontalen ScrollView-Alternative und ermittle anschließend, ob die Verschachtelung unterstützt wird und ob das Ergebnis ein Fix oder eine Dokumentation sein sollte.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react-native
- Bereich
- mobile-dev
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 25/100