web-dev-qa-db-fra.com

Comment désactiver "Glisser vers le bas pour fermer" sur le composant Modal dans React Native?

J'utilise le noyau composant React Native Modal . Dans le contenu modal, j'ai un bouton Done.

Appuyer sur Done est la seule façon dont nous voulons que les utilisateurs ferment le modal. Mais le composant Modal permet de glisser vers le bas depuis le haut de l'écran pour fermer.

Comment désactiver "glisser pour fermer"?

react-nativereact-navigation
10
GollyJer

Pour répondre à @Nikolai dans les commentaires, j'utilise React Navigation.

Je ne savais pas que les paramètres de gestes du navigateur contrôlaient également les gestes du modal natif réactif.

Désactiver les gestes a résolu mon problème.

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

En plus de la réponse de @ GollyJer, si vous souhaitez désactiver le geste de balayage pour un seul modal, vous pouvez également le faire:

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

Lutté avec un peu aussi. Voici ce qui a fonctionné pour moi:

Si vous avez un navigateur racine en tant que modal et à l'intérieur un autre navigateur empilé pour lequel vous souhaitez désactiver les gestes, mettez-le dans le navigateur racine pour le navigateur empilé, travaillé pour moi dans v2.12 iOS
navigationOptions: { gesturesEnabled: false, },

voici le code complet:

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,
  },
);
1
Oleg

Depuis React Navigation Version 5.x, ils l'ont changé en gestureEnabled au lieu de gesturesEnabled (sans le 's ) pour les deux StackNavigator et DrawerNavigator

Exemple d'utilisation:

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