callstack / callstack/react-native-pager-view
Why does the PagerView height growth not effect any views that it is nested inside of ?
- Lingua principale
- TypeScript
- Stelle
- 3.4k
- Fork
- 476
- Merge medio
- 10g 21h
- PR unite (30g)
- 2
Descrizione
## 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%',
},
```
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Riproduci l'esempio segnalato di un PagerView annidato all'interno di FlatList, inclusi gli stili minHeight e lo scorrimento interno disabilitato, su iOS e Android. Confronta il suo comportamento di layout con l'alternativa ScrollView orizzontale, quindi determina se l'annidamento è supportato e se il risultato debba essere un fix o della documentazione.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react-native
- Ambito
- mobile-dev
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 25/100