如何禁用React Native中的Modal组件上的“向下滑动关闭”?

问题描述 投票:4回答:3

我正在使用核心React Native Modal component。在模态内容中,我有一个Done按钮。

Doneis是我们希望用户关闭模态的唯一方法。但Modal组件允许从屏幕顶部向下滑动以关闭。

你如何关闭“滑动关闭”?

react-native react-navigation
3个回答
4
投票

要在评论中回答@Nikolai,我正在使用React Navigation。

我没有意识到导航器中的手势设置也控制了反应原生模态的手势。

关闭手势解决了我的问题。

const HomeScreenContainer = StackNavigator(
  {
    HomeScreen: { screen: Screens.HomeScreen },
    PostScreen: { screen: Screens.PostScreen },
    CameraScreen: { screen: Screens.CameraScreen },
    CameraRollScreen: { screen: Screens.CameraRollScreen },
  },
  {
    navigationOptions: {
      gesturesEnabled: false,
    },
  },
);

1
投票

除了@ GollyJer的答案之外,如果要禁用单个模态的滑动手势,您还可以执行以下操作:

const AppNavigator = StackNavigator({
    ModalScreen: {
      screen: ModalScreen,
      navigationOptions: {
        gesturesEnabled: false
      },
    }
}

1
投票

也有点挣扎。这对我有用:

如果您将根导航器作为模态并且在其中另一个要为其禁用手势的堆叠导航器,则将其放入堆叠导航器的根导航器中,在v2.12 iOS中为我工作 navigationOptions: { gesturesEnabled: false, },

这是完整的代码:

const RootStack = createStackNavigator(
  {
    LoginNavigator: {
      screen: LoginNavigator,
      navigationOptions: {
        gesturesEnabled: false,
      },
    },
    ModerationNavigator: {
      screen: ModerationNavigator,
    },
    WalletNavigator: {
      screen: WalletNavigator,
    },
    FloatingNavigator: {
      screen: FloatingNavigator,
    },
    UIKitNavigator: {
      screen: UIKitNavigator,
    },
    MainMapViewScreen: {
      screen: MainMapViewScreen,
    },
    FullscreenPhotoScreen: {
      screen: FullscreenPhotoScreen,
    },
  },
  {
    mode: 'modal',
    initialRouteName: 'MainMapViewScreen',
    headerMode: 'none',
    header: null,
  },
);
© www.soinside.com 2019 - 2024. All rights reserved.