ReactNavigator -StackNavigator, как использовать разную анимацию только с определенным экраном c

Question

с использованием

"response-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,
  },
});

Все остальные экраны открываются в виде карточки, и я хочу открыть только один конкретный c экран в модальной форме.

Я пробовал

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',
});

Первый код не удалось, потому что все дуги были открыты в формате карты.

Во втором коде, который я попробовал, экран, который я хотел, был открыт в модальной форме, но когда я перешел от модального к подробному, модальный был закрыт.

В первом коде возможно ли открыть только модальный экран в модальном виде?

Answer 1

Я решил это таким образом.

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,
});

Измените анимацию, отправив trasition:'forVertical' в параметры при навигации.