web-dev-qa-db-fra.com

React Navigation: Le balayage du tiroir ne fonctionne pas dans Android

Je cherche une solution depuis longtemps, mais étonnamment, je pense que personne ne l’a encore rencontrée. Donc je l'affiche.

J'ai créé un navigateur de tiroir simple avec React Navigation V3. J'ai ajouté une icône de menu et lorsque je clique dessus, le tiroir apparaît comme il se doit. Mais aucun geste de la main ne fonctionne. Glisser de gauche à droite ne fait rien. Même lorsque le tiroir est ouvert, taper sur un espace vide ne ferme pas le tiroir.

Voici mon code:

import {
    createStackNavigator,
    createSwitchNavigator,
    createAppContainer,
    createDrawerNavigator
} from 'react-navigation';
import Home from './screens/Home';
import LoginForm from './screens/LoginForm';
import Articles from './screens/Articles';

const AuthStack = createStackNavigator({
    LoginScreen: LoginForm
});

const AppStack = createDrawerNavigator({
    HomeScreen: Home,
    ArticlesScreen: Articles
});

const RootNavigator = createSwitchNavigator(
    {
        Auth: AuthStack,
        App: AppStack
    },
    {
        initialRouteName: 'Auth'
    }
);

export default createAppContainer(RootNavigator);
androidreact-nativereact-navigationswipe
36
Sadman Muhib Samyo

J'ai trouvé la solution. React La navigation dépend de la bibliothèque react-native-gesture-handler. Dans la section Installation de React Navigation Docs, il est uniquement indiqué de créer un lien à l'aide de la commande react-native link. C'est assez pour iOS. Mais pour Android, vous devez éditer le fichier MainActivity.Java, afin que la bibliothèque du gestionnaire de mouvements puisse fonctionner comme prévu:

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

Reportez-vous à la documentation: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

En fait, il n’est nulle part indiqué dans React Navigation Documentation de modifier les fichiers, car il est spécifique à react-native-gesture-handler et non React Navigation. Je garde la réponse ici pour que cela puisse aider les autres.

UPDATE: Les derniers documents de React Navigation abordent ce problème.

101
Sadman Muhib Samyo