react-native-gesture-handler的Drawer Layout无法打开/关闭问题求助

代码存在的核心问题 #

• ref赋值逻辑错误：你在DrawerLayout的ref回调中写的是refDrawer = refDrawer，并没有把实例赋值给外层声明的drawer变量，导致drawer始终为null
• 事件回调错误调用：多处onPress回调直接加了括号执行（比如drawer.closeDrawer()、drawer.openDrawer()），会在组件渲染阶段就直接触发方法，而非点击时执行，此时drawer还未完成赋值必然报错
• 未渲染DrawerLayout组件：你声明了render函数返回抽屉布局，但最外层return中没有调用该函数，导致DrawerLayout从未被挂载，drawer实例永远不存在
• 函数组件存储ref方式不规范：函数组件中存储持久化引用应该使用useRef Hook，直接声明普通变量会在组件重渲染时被重置

修正后完整代码 #

import React, { useRef } from 'react';
import { View, Button, TouchableOpacity, Text } from 'react-native';
import { DrawerLayout } from 'react-native-gesture-handler';

const NewBet: React.FC = () => {
  // 用useRef存储drawer实例
  const drawerRef = useRef<DrawerLayout>(null);

  const renderDrawer = () => {
    return (
      <Button 
        // 去掉直接调用的括号，点击时才执行close方法
        onPress={() => drawerRef.current?.closeDrawer()} 
        title='Close Drawer'
      />
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <DrawerLayout
        ref={drawerRef}
        drawerWidth={200}
        drawerPosition='right'
        drawerType='front'
        drawerBackgroundColor='#ddd'
        renderNavigationView={renderDrawer}
      >
        <TouchableOpacity style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text 
            onPress={() => drawerRef.current?.openDrawer()}
          >
            打开抽屉
          </Text>
          <Button 
            onPress={() => drawerRef.current?.openDrawer()} 
            title='Open Drawer'
            style={{ marginTop: 20 }}
          />
        </TouchableOpacity>
      </DrawerLayout>
    </View>
  );
};

export default NewBet;

内容的提问来源于stack exchange，提问作者Guilherme