本文介绍了React Navigation:在抽屉上滑动在 Android 中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在寻找解决方案,但令人惊讶的是,我认为还没有人遇到过.所以我发了.

I have been searching for a solution for a long time, but surprisingly, I think nobody has faced it yet. So I am posting it.

我使用 React Navigation V3 创建了一个简单的 Drawer Navigator.我添加了一个菜单图标,当我点击它时,抽屉会出现它应该的样子.但是,没有手势有效.从左向右滑动什么都不做.即使抽屉打开,点击空白处也不会关闭抽屉.

I have created a simple Drawer Navigator with React Navigation V3. I have added a Menu icon, and when I click it, the drawer appears as it should be. But, no hand gesture is working. Swiping from left to right don't do anything. Even when the drawer is open, tapping on empty space doesn't close the drawer.

这是我的代码:

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

推荐答案

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

I have found the solution. React Navigation depends on the react-native-gesture-handler library. In the Installation section of React Navigation docs, it only says to create link by using the command react-native link. This is enough for iOS. But for Android, you have to edit the MainActivity.java file, so that the gesture handler library can work as expected:

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.我将答案保留在这里,以便它可以帮助其他人.

Actually, it's nowhere stated in React Navigation documentation to modify any files, as it is specific to react-native-gesture-handler and not React Navigation. I am keeping the answer here so it may help others.

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

UPDATE: The latest docs of React Navigation addresses this issue

这篇关于React Navigation:在抽屉上滑动在 Android 中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-27 03:01
查看更多