如何创建使用方法而不是嵌入到父视图中调用的自定义警报对话框

Question

如何制作一个自定义警报对话框，该对话框在关闭并使用静态方法从应用程序中的任何位置调用时会自毁。与反应原生方法相同

警报((

我当前的代码：

import { View } from 'react-native';
import { Portal, Dialog } from 'react-native-paper';
static function showDialog(title, paragraph, buttonLabelText, onDismissHandler, canDismiss) {
    return (
        <View style={{ flex: 1 }}>
        <Portal>
            <Dialog dismissable={canDismiss} visible={need a value here} onDismiss={() => {this.onDismissHandler()}}>
                <Dialog.Title>{title}</Dialog.Title>
                <Dialog.Content>
                    <Paragraph>{paragraph}</Paragraph>
                </Dialog.Content>
                <Dialog.Actions>
                    <Button onPress={() => {this.onDismissHandler()}}>{buttonLabelText}}</Button>
                </Dialog.Actions>
            </Dialog>
        </Portal>
      </View>
    )
}

export default { showDialog };

Answer 1

React-native 有它在Alert上，你可以像下面这样使用。

import { Alert } from 'react-native';
import _ from 'lodash';
export const showPopupAlert = (message, onOKPressed: _.noop) => {
    Alert.alert(
      '',
      message,
      [
        { text: 'OK', onPress: onOKPressed },
      ],
    );
};
export const showOptionAlert = (message, buttonOk, buttonCancel, action, title) => {
  Alert.alert(
    title,
    message,
    [
      { text: buttonOk, onPress: action },
      { text: buttonCancel },
    ],
    { cancelable: false },
  );
};

将其保存为ShowAlert.js为根拉瓦尔组件，并像下面这样调用。

import { showPopupAlert } from 'yourpath/ShowAlert';

showPopupAlert('Your message');//像这样打电话