React导航：抽屉上的滑动在Android中不起作用

ccgok5k5 于 2023-04-04 发布在 Android

关注(0)|答案(5)|浏览(107)

我一直在寻找一个解决方案很长一段时间，但令人惊讶的是，我认为没有人面对它。所以我张贴它。
我用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);

android

来源：https://stackoverflow.com/questions/53394982/react-navigation-swipe-on-drawer-does-not-work-in-android

5条答案

按热度按时间

jckbn6z71#

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

赞(0）回复(0）举报 2023-04-04

ckocjqey2#

在项目的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放在根index.js的开头

import 'react-native-gesture-handler';

赞(0）回复(0）举报 2023-04-04

6l7fqoea3#

在0.61.0以上的版本中似乎是固定的，但对于旧版本，这对我来说是有效的。
在index.js中：

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

赞(0）回复(0）举报 2023-04-04

drkbr07n4#

我禁用了'useLegacyImplementation'和work的。

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

赞(0）回复(0）举报 2023-04-04

vltsax255#

React native文档更新了这个问题，你可以在下面的链接中找到一个名为将依赖项安装到裸React Native项目的部分
https://reactnavigation.org/docs/en/getting-started.html#installation

赞(0）回复(0）举报 2023-04-04