Reaccionar navegación StackNavigator: permite que las escenas en la tarjeta se expandan más allá del espacio disponible
Estoy representando un StackNavigator
dentro de un ScrollView
junto con otros componentes que permanecen constantes durante la navegación. Sin embargo, cuando se ve en teléfonos con pantallas pequeñas, lo que sucede es que el componente StackNavigator
se vuelve lo suficientemente pequeño como para caber en la pantalla, lo que oculta parte de mi contenido, en lugar de permitir que se produzca el desplazamiento. Mi código se ve así (sin detalles superfluos):
const Navigator = StackNavigator ({
splash: { screen: Splash },
prompt: { screen: Prompt },
...
}, {
initialRouteName: 'splash',
headerMode: "none",
cardStyle: {
backgroundColor: "transparent",
flex: 1
}
});
...
render () {
return (
<KeyboardAvoidingView style={{... flex: 1 ...}}>
<ScrollView
style={{... flex: 1 ...}}
contentContainerStyle={{
flexGrow: 1,
justifyContent: "space-around",
alignItems: "center"
}}>
[other items here]
<Navigator />
</ScrollView>
</KeyboardAvoidingView>
);
}
El componente Splash
es bastante pequeño, solo muestra una sola línea de texto, pero cuando se reemplaza por Prompt
(que es más grande), esperaba el Navigator
para expandirse para permitir que ScrollView
se desplace para ver todo el contenido en Prompt
, pero no lo hace: el contenido se corta en la parte inferior de la pantalla y no se puede desplazar.
Observar la jerarquía de componentes con react-devtools
muestra una asombrosa variedad de diferentes componentes que se inyectan en el diseño: Navigator
se expande a su vez a:
- un
NavigationContainer
- un
Navigator
(aparentemente no relacionado con mi propio objeto de ese nombre) - un objeto "
Unknown
" - un
CardStackTransitioner
- un
Transitioner
- un
View
(y suRCTView
incrustado) - un
CardStack
- dos
View
s más
- un par de
Container
s, cada uno de los cuales contiene: - un
Card
- un
AnimatedComponent
- otro
View
- un
SceneView
- y finalmente mis componentes.
Ingenuamente, parece que de alguna manera necesito aplicar un estilo flexGrow
a todos esos niveles intermedios para que esto funcione, pero no veo ninguna opción para controlar los estilos de la mayoría de ellos. ¿Cómo puedo hacer que StackNavigator se expanda según sea necesario para habilitar el desplazamiento?