我一直在寻找解决方案,但令人惊讶的是,我认为还没有人面对它.所以我把它贴出来了.

我用React Navigation V3创建了一个简单的抽屉导航器.我已经添加了一个菜单图标,当我点击它时,抽屉就会按原样出现.但是,任何手势都不起作用.从左向右滑动什么都不做.即使抽屉是打开的,敲击空的空间也不会关闭抽屉.

这是我的代码:

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导航取决于react-native-gesture-handler库.在React Navigation docs的安装部分,它只说使用命令react-native 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导航文档中没有规定修改任何文件,因为它是针对react-native-gesture-handler而不是React Navigation的.我将答案保存在这里,以便帮助他人.

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

React-native相关问答推荐

如何重复使用expo 音频对象S录音?

如何在底部标签导航中添加顶部标签

将值从一个 js 文件传递​​到 react native 中的另一个 js 文件:react native

根据搜索字符串中的每个字母过滤数组

如何在 react-navigation v6 中更改标题高度

从 React 原生 Js 代码调用 Android Native UI 组件方法

_react2.default.PropTypes.function 未定义

如何停止在 textInput React Native 中输入空格?

PanResponder 在第二次拖动时将 Animated.View 捕捉回原始位置

如何在 react-native 中设置 Onpress On Textinput

在选项卡更改时react-navigation

可能的未处理promise 拒绝(id:0):错误: "getLoginData" is read-only

React.js - 为所有组件方法使用属性初始化器

如何更改 React Native(android)应用程序的远程推送通知图标

在 React Native 中仅显示第一行文本

如何在 ubuntu 上安装 facebook watchman?

在特定屏幕上使用react-navigation修改后退按钮

FlatList vs map react-native

如何在react-native中显示toast消息

如何从 react-native-fbsdk 获取用户信息(邮箱、姓名等)?