此接口显示一个覆盖应用程序渲染的所有其他视图的视图,从而阻止用户与被覆盖的视图进行任何直接交互。
模态框由调用方提供的“模态框ID”标识。这些ID应该是唯一的。
一次只能显示一个模态框。如果已经显示了一个模态框,则新显示的模态框会被推入模态框堆栈。当一个模态框被关闭时,它会从堆栈中弹出,然后下一个模态框变得可见。
模态框可以使用 ReactXP.App 命名空间中的方法进行显示和关闭。
模态框覆盖整个屏幕,但它是透明的。它的子元素定义了可见内容及其在屏幕上的位置。
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);
};