模态框 (Modal)

此接口显示一个覆盖应用程序渲染的所有其他视图的视图,从而阻止用户与被覆盖的视图进行任何直接交互。

模态框由调用方提供的“模态框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);
};