Question

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

Answer 1

在自定义 drawer 中，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;

Answer 2

这对我有用：

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

Answer 3

尝试这个。太棒了

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

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

3 个答案: