How to check if my react-native-modalize modal is open or close?

Question

实际上我正在同时处理多个模态，所以我必须做出一个条件，如果我的带有“xyz”参考的模态是关闭的，那么显示一个按钮。

Answer 1

You should make a custom component with a modal in it, so every modal has its own state - isOpen. Then in your custom modal component, you can show something or not, based on your isOpen property.

Answer 2

react-native-modalize has onOpen and onClose props which will allow you to set some state to keep track of then open/closed status of each modal. You can then use that state to control the rendering of your buttons.

Example on Expo Snack .

import React, { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import { Modalize } from 'react-native-modalize';
import RnGH  from 'react-native-gesture-handler';
const { useState, useEffect } = React;

export default function App() {
  const modalA = useRef(null);
  const modalB = useRef(null);

  const [modalAOpen, setModalAOpen] = useState(false);
  const [modalBOpen, setModalBOpen] = useState(false);

  return (
    <>
      <Button
        onPress={() => {
          if (modalAOpen) {
            modalA.current?.close();
          } else {
            modalA.current?.open();
          }
        }}
        title={`${modalAOpen ? 'Close' : 'Open'} Modal A`}
      />
      <Button
        onPress={() => {
          if (modalBOpen) {
            modalB.current?.close();
          } else {
            modalB.current?.open();
          }
        }}
        title={`${modalBOpen ? 'Close' : 'Open'} Modal B`}
      />

      <Modalize
        ref={modalA}
        onOpen={() => setModalAOpen(true)}
        onClose={() => setModalAOpen(false)}>
        <Text style={{ color: 'red' }}>Modal A</Text>
      </Modalize>
      <Modalize
        ref={modalB}
        onOpen={() => setModalBOpen(true)}
        onClose={() => setModalBOpen(false)}>
        <Text style={{ color: 'blue' }}>Modal B</Text>
      </Modalize>
    </>
  );
}