Globales Multi-Kontext-Modal funktioniert nicht wie erwartet ⇐ Android

[Anonymous]

Ich versuche, in meiner RN-Expo-App ein Multi-Kontext-Modal zu erstellen, in dem ich eine globale Modalkomponente habe, die von überall in meiner App ausgelöst werden kann, aber ich kann angeben, welche Ansicht nach dem Öffnen des Modals angezeigt werden soll. Ich werde also ein Modal "Create" und "Bearbeiten" haben.
Ich habe auch ein lokales Modal auf meiner Seite implementiert, um zu testen, und dies funktioniert bei beiden gut. Globales Modal oder es gibt eine Möglichkeit, dies zu tun, die ich noch nicht begegnet bin. Ich habe mehr Erfahrung mit React als mit RN. Für mich ist so, wie dies getan wurde, Sinn und sollte funktionieren, aber ich stecke fest darüber, warum es auf dem Handy schief geht. < /P>
Sie können aus dem mobilen Screenshot sehen, dass beim Auslösen des globalen Modals ein dunkler Overlay gegossen wird, aber es gibt kein tatsächliches Modal in Ansicht. Schublade In dieser App sehen Sie aus dem Code unten, dass der Modal außerhalb dieses Schubladennavigators lebt. = "S-table-container">


Ansicht < /th>
< Th> Desktop < /th>
Mobile < /th>
< /tr>
< /thead>

< Br/> Seite Load




Klicken Sie auf Lokale Modal -Schaltfläche < /td>


< /tr>

Klicken = "https://i.sstatic.net/kzmlketbm.png"/>




Index.tsx < /p>

Code: Select all

< /code>
Modal-container.tsx
const { modal, closeModal } = useModal();

return ;
< /code>
modal-context.tsx
const ModalContext = createContext(null);

export const ModalContextProvider = ({ children }) => {
const [modal, setModal] = useState({ isVisible: false, type: null, props: {} });

const openModal = (type, props = {}) => setModal({ isVisible: true, type, props });
const closeModal = () => setModal({ isVisible: false, type: null, props: {} });

return (

{children}

);
};

export const useModal = () => useContext(ModalContext);