React Navigation：在抽屉上滑动在 Android 中不起作用

Question

我一直在寻找解决方案，但令人惊讶的是，我认为还没有人面对过它。所以我发了。

我用 React Navigation V3 创建了一个简单的 Drawer Navigator。我添加了一个菜单图标，当我单击它时，抽屉会按原样出现。但是，没有手势起作用。从左向右滑动不做任何事情。即使抽屉打开，点击空的 space 也不会关闭抽屉。

这是我的代码：

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);

Answer 1

我找到了解决办法。 React Navigation 依赖于 react-native-gesture-handler 库。在 React Navigation 文档的安装部分，它只说使用命令 react-native link 创建 link。这对 iOS 来说已经足够了。但是对于 Android，您必须编辑 MainActivity.java 文件，以便手势处理程序库可以按预期工作：

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);
+      }
+    };
+  }
}

参考文档：https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

实际上，React Navigation 文档中没有说明修改任何文件，因为它特定于 react-native-gesture-handler 而不是 React Navigation。我将答案保留在这里，以便对其他人有所帮助。

更新： React Navigation 的最新文档解决了这个问题

Answer 2

React native 文档更新了这个问题，您可以在下面的 link

中找到名为 Installing dependencies into a bare React Native project 的部分

https://reactnavigation.org/docs/en/getting-started.html#installation

Answer 3

似乎在 0.61.0 以上的版本中已修复，但对于旧版本这对我有用。

在index.js中：

. . .
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
. . .

Answer 4

在您项目的 index.js 中，只需使用 gestureHandlerRootHOC:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

资源：https://github.com/react-navigation/drawer/issues/105#issuecomment-540667009

更新：

在 React 导航中 > 5.x

直接把react-native-gesture-handler放在root的开头index.js

import 'react-native-gesture-handler';

React Navigation：在抽屉上滑动在 Android 中不起作用

React Navigation: Swipe on drawer does not work in Android

android

swipe

react-native

react-navigation

更新：

在 React 导航中 > 5.x