React Native：如何判断react-native-raw-bottom-sheet开合状态并正确关闭

在React Native应用中使用react-native-raw-bottom-sheet组件时，我想判断RBSheet是否处于打开状态，如果已经打开就将其关闭。但我写的代码不仅没实现需求，反而会触发RBSheet打开。

我的错误代码：

if(refRBSheet.current?.open()){
  refRBSheet.current.close();
}

问题根源 #

你这里犯了一个逻辑错误：refRBSheet.current?.open()是触发弹窗打开的方法，不是用来判断状态的。所以不管弹窗之前是开是关，执行这行代码都会先调用打开方法，之后才会走关闭逻辑，结果就是弹窗被打开了。

正确实现方案 #

react-native-raw-bottom-sheet的ref没有直接暴露公开的状态判断属性，推荐用以下两种方式解决：

1. 手动维护状态变量（推荐）

在组件里声明一个状态变量，通过弹窗的onOpen和onClose回调来更新状态，以此追踪弹窗的开闭状态：

import { useState, useRef } from 'react';
import RBSheet from 'react-native-raw-bottom-sheet';

const YourComponent = () => {
  const [isSheetOpen, setIsSheetOpen] = useState(false);
  const refRBSheet = useRef(null);

  // 自定义判断并关闭的函数
  const closeSheetIfNeeded = () => {
    if (isSheetOpen) {
      refRBSheet.current?.close();
    }
  };

  return (
    <>
      {/* 触发按钮或其他元素 */}
      <RBSheet
        ref={refRBSheet}
        onOpen={() => setIsSheetOpen(true)}
        onClose={() => setIsSheetOpen(false)}
        // 其他配置项
      >
        {/* 弹窗内容 */}
      </RBSheet>
    </>
  );
};

2. 读取组件内部私有状态（不推荐）

部分版本的组件内部会有_isOpen这个私有属性可以读取，但这属于依赖组件内部实现，后续版本更新可能会失效，风险较高：

if (refRBSheet.current?._isOpen) {
  refRBSheet.current.close();
}

总结 #

优先选择手动维护状态的方式，这种方式更稳定，符合React的状态管理逻辑，不会受组件内部改动的影响。

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