Diese Schnittstelle zeigt eine Ansicht an, die sich über alle anderen von der App gerenderten Ansichten legt und jegliche direkte Benutzerinteraktion mit den überlagerten Ansichten verhindert.
Ein Modal wird durch eine vom Aufrufer bereitgestellte „Modal-ID“ identifiziert. Diese sollten eindeutig sein.
Es kann immer nur ein Modal gleichzeitig angezeigt werden. Wenn ein Modal bereits angezeigt wird, wird ein neu angezeigtes Modal auf den Modal-Stack gelegt. Wenn ein Modal geschlossen wird, wird es vom Stack entfernt und das nächste Modal wird sichtbar.
Ein Modal kann mit Methoden innerhalb des ReactXP.App-Namensraums angezeigt und geschlossen werden.
Ein Modal bedeckt den gesamten Bildschirm, ist aber transparent. Seine Kinder definieren den sichtbaren Inhalt und dessen Position auf dem Bildschirm.
interface ModalOptions {
// Android, iOS, and Windows only.
// The id of the root view this modal is associated with.
// Defaults to the view set by UserInterface.setMainView();
rootViewId?: string;
}
// Removes the modal from the modal stack, unmounting it if it's currently
// on the top of the stack and showing the next modal in the stack.
dismiss(modalId: string);
// Removes all modals from the modal stack.
dismissAll();
// Indicates whether the specified modal is in the modal stack. If no id provided indicates if some modal is displayed.
isDisplayed(modalId?: string): boolean;
// Pushes the modal onto the modal stack.
show(modal: React.ReactElement<ViewProps>, modalId: string, options?: ModalOptions);
const _modalId = 'ErrorDialog';
showDialog() {
let dialog = (
<RX.View style={ _styles.errorDialog }>
<RX.Text style={ _styles.descriptionText }>
'An error occurred'
</RX.Text>
<RX.Button style={ _styles.button }
onPress={ this._onOkButtonPress }>
<RX.Text style={ _styles.buttonText }>
'OK'
</RX.Text>
</RX.Button>
</RX.View>
);
RX.Modal.show(dialog, _modalId);
}
private _onOkButtonPress = (e: RX.Types.SyntheticEvent) => {
RX.Modal.dismiss(_modalId);
};