如何在 React Native Navigation wix V1 中单击时关闭抽屉答案

【问题标题】：How to close drawer on click in React Native Navigation wix V1如何在 React Native Navigation wix V1 中单击时关闭抽屉
【发布时间】：2019-03-01 10:25:15
【问题描述】：

我正在使用来自 Wix [V1] 的 react native 0.56.0 和 React Native Navigation。在 React 本机导航中，有一个启用抽屉的选项。现在，如果用户在抽屉菜单中选择某个选项或在抽屉外单击，则可以关闭抽屉，但我想在单击 X 按钮时关闭抽屉。有没有人找到办法做到这一点？

【问题讨论】：

你用的是v1还是v2的哪个版本？
我使用的是 v1 1.1.476

标签： react-native drawer wix-react-native-navigation

【解决方案1】：

试试这个。真棒

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

【讨论】：

【解决方案2】：

在自定义抽屉中，props.navigation 中已经有一个名为 closeDrawer 的函数。

您的关闭按钮将如下所示：

<TouchableOpacity
  onPress={props.navigation.closeDrawer}
  style={styles.closeButton}
>
 <Image source={Images.close} />
</TouchableOpacity>

这里有更多的代码来说明上下文：

在 App.js 中

import { createDrawerNavigator } from "@react-navigation/drawer";
import DrawerScreen from "./src/screens/DrawerScreen";

const Drawer = createDrawerNavigator();

function LeftDrawerStack() {
  return (
    <Drawer.Navigator 
      drawerContent={(props) => <DrawerScreen {...props} 
    />} 
    >
      <Drawer.Screen name={"Menu item 1"} component={ProfileScreen} />
      <Stack.Screen name={"Menu item 2")} component={PaymentScreen} />
    </Drawer.Navigator>
  );
}

在 DrawerScreen.js 中

import React from "react";
import {TouchableOpacity, View, Image, Text} from 'react-native';
import {
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';
import styles from './styles/DrawerScreenStyle';


function DrawerScreen(props) {
  return (
    <DrawerContentScrollView style={styles.container} {...props}>
      <View style={styles.drawerHeader}>  
        <TouchableOpacity
          onPress={props.navigation.closeDrawer}
          style={styles.closeButton}
        >
          <Image source={Images.close} />
        </TouchableOpacity>
      </View>
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  );
}

export default DrawerScreen;

【讨论】：

closeDrawer是一个函数，所以需要props.navigation.closeDrawer();

【解决方案3】：

这对我有用：

this.props.navigator.toggleDrawer({
    side: 'right',
    animated: true,
    to: 'closed',
});

【讨论】：

我会尝试并让你知道它是否有效。谢谢你的帮助