Reaccionar navegación StackNavigator: permite que las escenas en la ta

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 su RCTView incrustado)
  • un CardStack
  • dos Views
  • más
  • un par de Containers, 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?

Mostrar la mejor respuesta

StackNavigator (o los otros navegadores provistos por react-navigation) no está diseñado para ser renderizado dentro de ScrollViews.

Es difícil decir cuál es su objetivo, pero StackNavigator debe ser el componente de nivel superior de su aplicación, en lugar de estar anidado como en el fragmento de código que proporcionó.

Mi recomendación sería crear componentes de pantalla que muestren su contenido (y estos componentes de pantalla pueden incluir ScrollView). Luego coloque las pantallas en un StackNavigator y renderice el StackNavigator creado.

Mi intención es tener un componente animado que se ubique sobre la sección de la pantalla que se usa para la navegación y permanezca allí de manera consistente (manteniendo su estado de animación a través de las transiciones), desplazándose con las pantallas de navegación si son demasiado grandes para sentarse juntas en la pantalla. Desafortunadamente, no creo que esto se pueda lograr de la manera que sugieres. ¿Me pregunto si tal vez necesito usar un SwitchNavigator y administrar el manejo de las transiciones yo mismo...?

puede usar StackNavigator y proporcionar su componente de encabezado personalizado reactnavigation.org/docs/stack-navigator. html#header ese componente se ubicará sobre el contenido