如何判断react-native-modalize指定ref的模态框处于开启或关闭状态？

要实现当ref为"xyz"的Modalize模态框关闭时显示按钮，你可以按以下步骤操作：

• 在组件内维护一个状态，专门跟踪目标模态框的开闭状态
• 给目标Modalize绑定onOpen和onClose回调，实时更新状态
• 根据状态判断是否渲染按钮

代码示例（函数组件） #

import React, { useState, useRef } from 'react';
import { Button } from 'react-native';
import Modalize from 'react-native-modalize';

const YourComponent = () => {
  // 初始默认模态框处于关闭状态
  const [isXyzModalClosed, setIsXyzModalClosed] = useState(true);
  // 绑定目标模态框的ref
  const xyzModalRef = useRef(null);

  return (
    <>
      {/* 仅当xyz模态框关闭时渲染按钮 */}
      {isXyzModalClosed && (
        <Button
          title="执行操作"
          onPress={() => {
            // 这里可添加按钮点击逻辑，比如打开其他模态框
            // xyzModalRef.current?.open();
          }}
        />
      )}

      {/* ref为xyz的Modalize模态框 */}
      <Modalize
        ref={xyzModalRef}
        onOpen={() => setIsXyzModalClosed(false)}
        onClose={() => setIsXyzModalClosed(true)}
        // 可添加其他属性，如height、modalStyle等
      >
        {/* 模态框内部内容 */}
        {/* ... */}
      </Modalize>

      {/* 其他模态框可在此处添加 */}
      {/* <Modalize ref={otherModalRef}>...</Modalize> */}
    </>
  );
};

export default YourComponent;

另一种简化方式：直接通过ref获取状态 #

如果不想额外维护状态，也可以直接通过Modalize的ref读取当前开闭状态，但要注意ref可能未初始化的情况：

{!xyzModalRef.current?.isOpen && (
  <Button title="执行操作" onPress={() => {/* 点击逻辑 */}} />
)}

这种方式无需绑定回调，但要确保组件渲染时ref已指向Modalize实例，否则可能出现判断偏差。更推荐第一种维护状态的方式，逻辑更清晰可靠。

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