是否可以在每个屏幕上更改反应堆栈导航器的平移手势方向?

时间:2018-12-18 14:30:40

标签: react-native react-navigation react-navigation-stack

我正在使用react导航库,我希望根堆栈视图能够使用从右到左的动画推送某些屏幕,并从下到上推送某些屏幕。我遇到的主要问题是关闭屏幕的平移手势对于所有屏幕都是相同的。

我的路线:

const MODAL_ROUTES = [
  SceneKeys.EditProfileNavigator,
  SceneKeys.PicturePreview
]

const navigator = createStackNavigator(
  {
    [SceneKeys.Main]: { // MAIN TAB BAR SCREEN
      screen: Main,
    },

    // Profile edit - comes from bottom, should not be dismissable by gestures
    [SceneKeys.EditProfileNavigator]: { 
      screen: EditProfileNavigator,
      navigationOptions: {
        gesturesEnabled: false,
      }
    },

    // Picture preview - comes from bottom, should be dismissible with gesture top to bottom
    [SceneKeys.PicturePreview]: {
      screen: PicturePreview,
    },

    // comes from right, should be dismissible by swiping from the left
    [SceneKeys.Conversation]: {
      screen: Conversation
    }
  },
  {
    headerMode: 'none',

    transitionConfig: (transitionProps, prevTransitionProps) => {
      const isModal = MODAL_ROUTES.some(
        screenName =>
          screenName === transitionProps.scene.route.routeName ||
          (prevTransitionProps && screenName === prevTransitionProps.scene.route.routeName)
      )
      return StackViewTransitionConfigs.defaultTransitionConfig(
        transitionProps,
        prevTransitionProps,
        isModal
      )
    }
  },
)

动画和过渡都可以正常工作,但是主要问题是可以使用左右摇动手势来关闭PicturePreview屏幕-我特别希望对此屏幕从上到下摇动手势关闭。

将整个堆栈模式设置为modal会使Conversation屏幕从底部过渡,当我想从右向左过渡时

1 个答案:

答案 0 :(得分:0)

不是我要找的答案,但是我找到了解决问题的方法。

基本上,我将导航器包装到另一个模式导航器。

我的路线现在看起来像这样:

> Modal Stack navigator

  > Stack navigator

    > Tab Bar 
    > Conversation
    > Edit profile

  > Picture preview

老实说,如果有人想以其他方式建议如何解决我的问题-请这样做