如何使用离子反应在应用程序加载时打开模式弹出窗口

Question

我正在使用 ionic-react 并希望在应用程序启动时启动模式弹出窗口。这个想法是在应用程序启动时创建一个登录弹出窗口。如果用户已经登录，我将关闭它，否则用户将登录。

我现在的问题是如何自动打开它？

我知道使用按钮打开的方式，如下面的代码

 <IonModal isOpen={loginModal} cssClass='my-custom-class'>
        <p>This is modal content</p>
        <IonButton onClick={() => setLoginModal(false)}>Close Modal</IonButton>
      </IonModal>
      <IonButton onClick={() => setLoginModal(true)}>Show Modal</IonButton>

但我不需要按钮。

Answer 1

它会根据您设置为 loginModal 的 isOpen 自动打开。当它设置为 true 时，模式将被打开。你应该为此使用一个变量。

const [showModal, setShowModal] = useState(true);

...

return(
  <IonModal isOpen={showModal} cssClass='my-custom-class'>
  ...
  </IonModal>
)

edit: fixed typo brackets

如何使用离子反应在应用程序加载时打开模式弹出窗口

how to open modal popup on app load using ionic react

ionic-framework

react-native

ionic-react