React Native中自定义抽屉组件内实现抽屉隐藏功能

嘿，这个需求太常见啦！我给你拆解下不同技术栈下的实现方式，你可以根据自己用的框架来选：

核心思路是通过状态控制抽屉的显示/隐藏，给X按钮绑定点击事件来修改这个状态。分两种场景：

非受控组件（组件内部维护状态） #

如果抽屉的显示逻辑完全由自己管理，直接在组件内部用useState维护状态就行：

import { useState } from 'react';

function SideMenu() {
  const [isOpen, setIsOpen] = useState(true); // 默认初始为打开状态

  // 点击X按钮时触发的关闭逻辑
  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <div className={`side-menu ${isOpen ? 'open' : 'closed'}`}>
      <button className="close-btn" onClick={handleClose}>
        X
      </button>
      {/* 抽屉里的其他内容 */}
    </div>
  );
}

配合CSS实现平滑过渡：

.side-menu {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh;
  background: white;
  transition: transform 0.3s ease;
  transform: translateX(100%); /* 默认隐藏在右侧 */
}

.side-menu.open {
  transform: translateX(0); /* 打开时滑入视野 */
}

受控组件（父组件控制显示状态） #

如果抽屉的显示由父组件控制（比如点击页面的某个按钮打开抽屉），那SideMenu需要接收父组件传递的状态和回调：

// 父组件
function App() {
  const [menuIsOpen, setMenuIsOpen] = useState(true);

  return (
    <div>
      <button onClick={() => setMenuIsOpen(true)}>打开抽屉</button>
      <SideMenu 
        isOpen={menuIsOpen} 
        onClose={() => setMenuIsOpen(false)} 
      />
    </div>
  );
}

// SideMenu组件
function SideMenu({ isOpen, onClose }) {
  return (
    <div className={`side-menu ${isOpen ? 'open' : 'closed'}`}>
      <button className="close-btn" onClick={onClose}>
        X
      </button>
      {/* 其他内容 */}
    </div>
  );
}

Vue里用v-bind绑定类名控制显示，配合v-on绑定点击事件，同样分两种场景：

非受控组件（内部维护状态） #

用ref维护内部状态，点击X按钮时修改状态：

<template>
  <div class="side-menu" :class="{ open: isOpen }">
    <button class="close-btn" @click="handleClose">X</button>
    <!-- 抽屉内容 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isOpen = ref(true); // 默认打开

const handleClose = () => {
  isOpen.value = false;
};
</script>

<style scoped>
.side-menu {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh;
  background: white;
  transition: transform 0.3s ease;
  transform: translateX(100%);
}

.side-menu.open {
  transform: translateX(0);
}
</style>

受控组件（父组件控制） #

通过defineProps接收父组件的状态，defineEmits触发关闭事件通知父组件：

<!-- 父组件 -->
<template>
  <div>
    <button @click="menuIsOpen = true">打开抽屉</button>
    <SideMenu :is-open="menuIsOpen" @close="menuIsOpen = false" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SideMenu from './SideMenu.vue';

const menuIsOpen = ref(true);
</script>

<!-- SideMenu组件 -->
<template>
  <div class="side-menu" :class="{ open: isOpen }">
    <button class="close-btn" @click="$emit('close')">X</button>
    <!-- 抽屉内容 -->
  </div>
</template>

<script setup>
defineProps({
  isOpen: {
    type: Boolean,
    default: false
  }
});

defineEmits(['close']);
</script>

如果不用框架，直接操作DOM切换类名就行：

<div class="side-menu open" id="sideMenu">
  <button class="close-btn" id="closeBtn">X</button>
  <!-- 内容 -->
</div>

<script>
const sideMenu = document.getElementById('sideMenu');
const closeBtn = document.getElementById('closeBtn');

closeBtn.addEventListener('click', () => {
  sideMenu.classList.remove('open');
});
</script>

<style>
.side-menu {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh;
  background: white;
  transition: transform 0.3s ease;
  transform: translateX(100%);
}

.side-menu.open {
  transform: translateX(0);
}
</style>

其实不管用什么技术，核心逻辑都是一样的：用一个状态标记抽屉是否显示，点击X按钮时修改这个状态，再通过CSS或者框架的指令来控制抽屉的显示/隐藏。

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