时间戳

首页 > 解决方案 > 是否可以更改每个屏幕的反应堆栈导航器平移手势方向？

react-native - 是否可以更改每个屏幕的反应堆栈导航器平移手势方向？

问题描述

我正在使用反应导航库，我希望根堆栈视图能够使用从右到左的动画和一些从下到上的屏幕推送一些屏幕。我遇到的主要问题是用于关闭屏幕的平移手势对于所有屏幕都保持不变。

我的路线：

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屏幕转换

标签： react-nativereact-navigationreact-navigation-stack

解决方案

不是我正在寻找的答案，但我找到了解决问题的方法。

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

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

> Modal Stack navigator

  > Stack navigator

    > Tab Bar 
    > Conversation
    > Edit profile

  > Picture preview

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

推荐阅读