你如何在 React Native 的 Modal 组件上禁用 "Swipe down to close"？

Question

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

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

如何关闭 "swipe to close"？

Answer 1

为了在评论中回答@Nikolai，我正在使用 React Navigation。

没想到navigator的手势设置也控制着react native modal的手势。

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

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

Answer 2

除了@GollyJer的回答，如果你想禁用单个Modal的滑动手势，你也可以这样做：

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

Answer 3

也有点挣扎。这是对我有用的：

如果你有根导航器作为模态并且在它里面有另一个你想禁用手势的堆叠导航器，然后把它放在堆叠导航器的根导航器中，在 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,
  },
);

Answer 4

自 React Navigation 版本 5.x 以来，他们已将其更改为 gestureEnabled 而不是 gesturesEnabled （不带 's） StackNavigator and DrawerNavigator

示例用法：

<Stack.Navigator mode="modal" screenOptions={{ gestureEnabled: false }}>
    <Stack.Screen name="HomeNav" component={HomeNavigator} />
</Stack.Navigator>

你如何在 React Native 的 Modal 组件上禁用 "Swipe down to close"？

How do you disable "Swipe down to close" on the Modal component in React Native?

react-native

react-navigation