Revisamos cada enunciados de nuestra web con la meta de mostrarte siempre información veraz y certera.
Solución:
En realidad, no hay soporte en react-navigation para cambiar la forma de presentación sobre la marcha de default para modal (ver la discusión sobre esto aquí). Me encontré con el mismo problema y lo resolví usando un top StackNavigator con headerMode ajustado a none y mode ajustado a modal:
const MainTabNavigator = TabNavigator(
Tab1Home: screen: Tab1Screen ,
Tab2Home: screen: Tab2Screen
);
const LoginRegisterStackNavigator = StackNavigator(
Login: screen: LoginScreen
);
const ModalStackNavigator = StackNavigator(
MainTabNavigator: screen: MainTabNavigator ,
LoginScreenStackNavigator: screen: LoginRegisterStackNavigator
,
headerMode: 'none',
mode: 'modal'
);
Esto me permite hacer lo siguiente (usando redux) en Tab1Screen y Tab2Screen para abrir la vista modal desde donde quiera:
this.props.navigation.navigate('LoginScreenStackNavigator');
No estoy seguro de si esto sigue siendo relevante para usted, pero me las arreglé para encontrar la forma de lograrlo.
Así que logré que funcionara usando tabBarComponent dentro de tabNavigatorConifg, puede detener la navegación de pestañas según el índice.
tabBarComponent: (jumpToIndex, ...props, navigation) => (
if (index === 2)
navigation.navigate('camera')
else
jumpToIndex(index)
/>
)
Una vez que haya hecho esto, mi método para mostrar la vista de manera modal en la parte superior de las vistas de pestañas fue colocar el navegador de pestañas dentro de un navegador de pila y luego simplemente navegar a una nueva pantalla dentro del navegador de pila.
react-navigationbottomTabNavigator tiene un tabBarOnPress opción de navegación que puede usar para anular las pulsaciones de tabulación:
https://reactnavigation.org/docs/en/bottom-tab-navigator.html#tabbaronpress
const AppContainer = createStackNavigator(
default: createBottomTabNavigator(
TAB_0: Stack0,
TAB_1: Stack1,
TAB_2: Stack2,
TAB_3: View // plain rn-view, or any old unused screen
,
defaultNavigationOptions:
// other tab navigation options...
tabBarOnPress: ( navigation, defaultHandler ) =>
if (navigation.state.key === 'TAB_3')
navigation.navigate('tabToOpenAsModal');
else
defaultHandler();
),
tabToOpenAsModal:
screen: TabToOpenAsModalScreen
,
mode: 'modal',
headerMode: 'none'
);
Si anida su navegador de pestañas dentro de un navegador de pila con un modal, puede abrirlo cuando se presiona el botón de la barra de pestañas. Dado que se abrió el modal y no la pestaña, cuando se cierra el modal, la aplicación vuelve a la pantalla que estaba visible antes de presionar la pestaña modal.
Reseñas y calificaciones
Si piensas que te ha sido de ayuda nuestro artículo, agradeceríamos que lo compartas con otros programadores y nos ayudes a difundir esta información.