Usando

"react-navigation": "^ 4.0.10",

"react-navigation-stack": "^ 1.10.3",

import {
  createStackNavigator, StackViewTransitionConfigs,
} from 'react-navigation-stack';

const HomeStackNavigator = createStackNavigator({
  List:ListContainer,
  Detail:DetailContainer,
  Modal: {
    screen: ModalContainer,
    navigationOptions: {
      ...StackViewTransitionConfigs.ModalSlideFromBottomIOS,
    },
  },
}, {
  mode: 'card',
  headerMode: 'none',
  defaultNavigationOptions: {
    gestureEnabled: true,
    ...StackViewTransitionConfigs.SlideFromRightIOS,
  },
});

Todas las demás pantallas se abren en forma de tarjeta y quiero abrir solo una pantalla específica en forma modal.

Lo intenté

const HomeStackNavigator = createStackNavigator({
  List:ListContainer,
  Detail:DetailContainer,
  },
}, {
  mode: 'card',
  headerMode: 'none',
  defaultNavigationOptions: {
    gestureEnabled: true,
    ...StackViewTransitionConfigs.SlideFromRightIOS,
  },
});
const HomeStackNavigator2 = createStackNavigator({
  Home:HomeStackNavigator,
  Modal: {
    screen: ModalContainer,
  },
}, {
  mode: 'modal',
  headerMode: 'none',
});

El primer código falló porque todos los arcos se abrieron en formato de tarjeta.

En el segundo código que probé, la pantalla que quería se abrió en forma modal, pero cuando pasé de modal a detalle, se cerró el modal.

En el primer código, ¿es posible abrir solo la pantalla modal en forma modal?

0
oijafoijf asnjksdjn 4 ago. 2020 a las 06:24

1 respuesta

La mejor respuesta

Lo resolví de esta manera.

import {
  createStackNavigator, StackViewTransitionConfigs, StackViewStyleInterpolator,
} from 'react-navigation-stack';

const transitionConfigs = (props) => {
  const { scene } = props;
  const { route } = scene;
  const params = route.params || {};
  const transition = params.transition || 'forHorizontal';
  if (transition === 'forVertical') {
    return StackViewTransitionConfigs.ModalSlideFromBottomIOS;
  }
  return StackViewTransitionConfigs.SlideFromRightIOS;
};

const HomeStackNavigator = createStackNavigator({
  List:ListContainer,
  Detail:DetailContainer,
  Modal: {
    screen: ModalContainer,
  },
}, {
  mode: 'card',
  headerMode: 'none',
  transitionConfig:transitionConfigs,
});

Cambie la animación enviando trasition:'forVertical' a los parámetros cuando navegue.

0
oijafoijf asnjksdjn 5 ago. 2020 a las 00:50