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

Posted 2023-02-16

【中文标题】如何在 React Native Navigation wix V1 中单击时关闭抽屉

【英文标题】：How to close drawer on click in 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

【参考方案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',
);

【讨论】：

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