Estoy tratando de recrear este estilo de navegador de pila en reaccionar nativo.
Aquí hay un video de su funcionamiento: https://youtu.be/l2sMaurPY5E
La forma en que funciona es que, cuando toca algo, la pantalla actual se reduce ligeramente y aparece la nueva pantalla encima. Luego verá una pila visible en la parte superior de la pantalla, que muestra las capas.
¿Es esto posible con React Native, o más específicamente, React Navigation? Ni siquiera sé cómo se llama para buscarlo.
Esto se puede lograr en React Naviagtion simplemente configurando la presentation
en modal
para la pantalla deseada (a través de la propiedad de options
, o como screenOptions
de pantalla para toda la pila si eso es lo que desea). Para que funcione en Android, es posible que deba pasar algunos accesorios adicionales.
En términos simples, puede definir su navegador como se muestra a continuación,
<NavigationContainer> <Stack.Navigator //define below properties to enable the modal presentation screenOptions={{ presentation: 'modal', headerMode: 'none', cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS, gestureEnabled: true, cardOverlayEnabled: true, }} > <Stack.Screen name="home" component={Home} /> <Stack.Screen name="Modal" component={Modal} /> </Stack.Navigator> </NavigationContainer>
Echa un vistazo a este Live Snack para verlo en acción.