反应导航:在抽屉上滑动在Android中不起作用

Question

我一直在寻找解决方案很长一段时间,但令人惊讶的是,我认为还没有人面对它.所以我发布它.

我用React Navigation V3创建了一个简单的Drawer Navigator.我添加了一个菜单图标,当我点击它时,抽屉显示应该是.但是,没有手势在起作用.从左向右滑动不做任何事情.即使抽屉打开,轻敲空的空间也不会关闭抽屉.

这是我的代码:

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.这对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

在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-handlerroot的开头index.js

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