React Navigation：在Android上抽屉菜单的滑动功能无法使用

Question

React Navigation：在Android上抽屉菜单的滑动功能无法使用

androidreact-nativereact-navigationswipe

63

我已经寻找了很长时间的解决方案，但令人惊讶的是，我认为还没有人面对过这个问题。所以我正在发布它。

我使用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);

- Sadman Muhib Samyo

5个回答

17

在你的项目的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 Navigation > 5.x 中：

只需将 react-native-gesture-handler 放在根 index.js 的开头即可。

import 'react-native-gesture-handler';

- Mahdi Bashirpour

1

谢谢，我必须努力解决手势处理程序才能使其正常工作。这解决了我的问题。 - Ibrahim Azhar Armar

index.js在哪里？ - Aljohn Yamaro

你好，我正在尝试您的建议，但它对于我的抽屉关闭问题并没有解决。你能在这里帮助我吗？https://dev59.com/eMHqa4cB1Zd3GeqPxFFt - newdeveloper

4

似乎在0.61.0及以上版本中已经修复，但对于旧版本，以下方法适用。

在index.js文件中：

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

- FarhadMohseni

1

我禁用了'useLegacyImplementation'，现在可以工作了。

    <Drawer.Navigator
        // useLegacyImplementation <- disable
        drawerContent={props => <DrawerContent {...props}
        />}
    >
        <Drawer.Screen name="HomeDrawer" component={Home}
        />
    </Drawer.Navigator>

- Wiharlley Yitzhak

-1

React Native文档已更新此问题，您可以在下面的链接中找到一个名为将依赖项安装到裸React Native项目中的部分。

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

- Gvs Akhil

1

我很久以前就提到了这个更新。在发帖之前请先阅读回答。 - Sadman Muhib Samyo

你还没有添加正确文档的链接，你可以先检查一下你的评论 @sadman。 - Gvs Akhil

添加文档链接没有任何意义，因为我已经在我的回答中指示了相同的事情。但是我确实提到了更新消息，这就足够了。 - Sadman Muhib Samyo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sadman Muhib Samyo · Accepted Answer

我已经找到解决方案。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的最新文档解决了此问题