es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Las pantallas no se muestran en el navegador de pestañas inferiores de Material desde la actualización a Expo SDK 43.

Las pantallas no se muestran en el navegador de pestañas inferiores de Material desde la actualización a Expo SDK 43.

20 Jul, 2023 Programación

Tengo un proyecto de Expo que utiliza SDK v42 y todo ha estado funcionando bien, la aplicación está actualmente en producción. Sin embargo, después de actualizar a Expo SDK 43, los navegadores de Stack que se pasan a la pestaña inferior Material no se renderizan y solo muestra una pantalla en blanco. He creado un proyecto de prueba con el siguiente repositorio de GitHub: https://github.com/kamrul91111/sdk.

Imagen 1:

Imagen 1

Imagen 2:

Imagen 2

Las pantallas en el navegadoor de Stack pasadas al navegadoor de pestaña inferior Material funcionan la primera vez, pero cuando voy a otra pantalla en la pestaña inferior y regreso, las pantallas ya no se renderizan.

Este problema se puede solucionar volviendo a la versión 42 de Expo o simplemente utilizando el navegadoor de pestaña inferior en lugar del navegadoor de pestaña inferior Material. ¿Cuál es el problema aquí? ¿Cómo se puede solucionar?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para el problema del Stack Navigator en Expo SDK 43

    El problema con el Stack Navigator que no se muestra al pasar al Material bottom tab navigator en Expo SDK 43 parece estar relacionado con el uso de animaciones en las pantallas. El problema se puede solucionar desactivando las animaciones para las pantallas del Stack Navigator.

    Para desactivar las animaciones, puedes establecer la opción animationEnabled como false para el componente Stack.Navigator en tu código. Por ejemplo:

    <navigationcontainer>
  <tab.navigator screenoptions="{{" headershown:="" false,="" tabbarstyle:="" {="" backgroundcolor:="" '#fff'="" },="" }}="" tabbar="{(props)" ==""> <mytabbar {...props}=""></mytabbar>}
  >
    <tab.screen name="Home" component="{HomeStack}"></tab.screen>
    <tab.screen name="Settings" component="{SettingsStack}"></tab.screen>
  </tab.navigator>
</navigationcontainer>

const HomeStack = () => (
  <stack.navigator animationenabled="{false}">
    <stack.screen name="Home" component="{HomeScreen}"></stack.screen>
    <stack.screen name="Details" component="{DetailsScreen}"></stack.screen>
  </stack.navigator>
);

const SettingsStack = () => (
  <stack.navigator animationenabled="{false}">
    <stack.screen name="Settings" component="{SettingsScreen}"></stack.screen>
    <stack.screen name="Profile" component="{ProfileScreen}"></stack.screen>
  </stack.navigator>
);

    Alternativamente, también puedes intentar actualizar a React Navigation v6 y utilizar la función createMaterialBottomTabNavigator en lugar del componente createMaterialBottomTabNavigator. Esto también debería solucionar el problema.

    import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

const App = () => (
  <navigationcontainer>
    <tab.navigator>
      <tab.screen name="Home" component="{HomeStack}"></tab.screen>
      <tab.screen name="Settings" component="{SettingsStack}"></tab.screen>
    </tab.navigator>
  </navigationcontainer>
);

    Espero que esto ayude a resolver el problema. Avísame si tienes alguna pregunta adicional.

Comments are closed.