Question

使用

“反应导航”：“ ^ 4.0.10”，

“反应导航堆栈”：“ ^ 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,
  },
});

所有其他屏幕都以卡的形式打开，而我只想以模式形式打开一个特定的屏幕。

我尝试过

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'发送给参数来更改动画。

ReactNavigator -StackNavigator如何仅在特定屏幕上使用不同的动画

1 个答案: