Dialog 对话框

更新时间:2024-06-05 03:14:32下载pdf

Dialog对话框是一个包含了一系列常用对话框的集合,默认伴随淡入淡出的动画效果。用于显示一些类似Native效果的组件。

代码演示

详细示例可参考 Dialog Demo

警告框

Dialog.alert({
  title: "标题",
  subTitle: "副标题",
  confirmText: "确认",
  onConfirm: (data, { close }) => {
      close();
  },
});

提示框

Dialog.confirm({
  title: "标题",
  subTitle: "副标题",
  cancelText: "取消",
  confirmText: "确认",
  onConfirm: (data, { close }) => {
    close();
  },
});

输入对话框

// 非受控输入框
Dialog.prompt({
  title: "非受控输入框",
  subTitle: "副标题",
  cancelText: "取消",
  confirmText: "确认",
  defaultValue: this.state.promptUnControlled,
  placeholder: "Password",
  onConfirm: (text, { close }) => {
    console.log("uncontrolled text :", text);
    this.setState({ promptUnControlled: text });
    close();
  },
});

// 受控输入框
Dialog.prompt({
  title: "受控输入框",
  subTitle: "副标题",
  cancelText: "取消",
  confirmText: "确认",
  value: this.state.promptControlled,
  placeholder: "Password",
  onChangeText: (text) => {
    // 使用value props 可令prompt成为受控组件,控制其输入框内容
    const t = +text;
    if (typeof t === "number" && !Number.isNaN(t)) {
      return text;
    }
  },
  onConfirm: (text, { close }) => {
    console.log('controlled text :', text);
    this.setState({ promptControlled: text });
    if (text.length < 2) {
     return;
    }
    close();
  },
});

单选/多选对话框

Dialog.checkbox({
  title: "Required",
  cancelText: "取消",
  confirmText: "确认",
  type: "radio",
  value: this.state.checkValueRadio,
  dataSource: [
    {
      value: "code1",
      title: "传感器选择",
    },
    {
      value: "code2",
      title: "房间传感器校准",
    },
    {
      value: "code3",
      title: "地板传感器校准",
      iconSize: 24,
      Icon: "warning",
      reverse: true,
      hideOnUnselect: true,
    },
  ],
  onConfirm: (value, { close }) => {
    this.setState({ checkValueRadio: value });
    close();
  },
});

列表对话框

弹出一个列表对话框。

Dialog.list({
  title: '这是标题',
  subTitle: '这是内容',
  dataSource: new Array(6).fill(1).map((_, idx) => ({
  title: idx === 0 ? '点我关闭' : `选项${idx}`,
  onPress: () => {
     idx === 0 && Dialog.close();
     console.log('Press', idx);
   },
  })),
  cancelText: '取消',
  confirmText: '确认',
  onConfirm: (value, { close }) => {
    close();
  },
});

自定义对话框

弹出一个自定义内容对话框。

Dialog.custom({
  title: "Custom",
  cancelText: "取消",
  confirmText: "确认",
  content: (
    <View
      style={{ height: 300, alignItems: "center", justifyContent: "center" }}
    >
      <Text style={{ fontSize: 32, color: "#000" }}>自定义内容</Text>
    </View>
  ),
  onConfirm: (value, { close }) => {
    close();
  },
});

交互演示

Dialog 对话框

API

Dialog API 除了close以外的第一个参数为对应组件的props,第二个参数为Modalprops。示例:Dialog.someMethod(props: Object, modalProps?: Object)

Dialog 通用属性

属性 说明 类型 默认值 必传
style 容器样式 ViewPropTypes.style null
headerStyle 头部样式 ViewPropTypes.style null
title 标题 string null
titleStyle 标题样式 Text.propTypes.style null
titleNumberOfLines 标题超过多少行显示省略号 number 2
subTitle 副标题 string null
subTitleStyle 副标题样式 Text.propTypes.style null
footerWrapperStyle footer 容器样式 ViewPropTypes.style null
cancelText 取消文案 string ''
cancelTextStyle 取消文字样式 Text.propTypes.style null
confirmText 确认文案 string ''
confirmTextStyle 确认文字样式 Text.propTypes.style null
onCancel 取消点击回调 function null
onConfirm 确认点击回调 function null
motionType 动画类型 string ScaleFadeIn
motionConfig 动画配置 object null

Dialog.alert

警告框。警告框只包含 confirm 按钮,不包含 cancel 按钮。alert 不包含 cancel 相关属性(cancelTextcancelTextStyleonCancel),其他属性详情参见 Dialog 通用属性。

Dialog.confirm

提示框。提示框是在警告框的基础上添加 cancel 按钮。属性详情参见 Dialog 通用属性。

Dialog.prompt

输入对话框。属性详情参见 Dialog 通用属性。Dialog.prompt 继承自 TextInput,因此prompt另外还包含 TextInput Prop 及以下 props:

属性 说明 类型 默认值 必传
showHelp 是否显示帮助按钮 boolean false
onHelpPress 点击帮助回调 () => void null
inputWrapperStyle TextInput 的容器样式 ViewPropTypes.style null
inputStyle TextInput 的样式 TextInput.propTypes.style null

Dialog.checkbox

单选或多选对话框。属性详情参见 Dialog 通用属性。Dialog.checkbox 中的每一个 checkbox 项都继承自 CheckboxItem,因此checkbox还包含 CheckboxItem Prop 及以下 props:

属性 说明 类型 默认值 必传
type checkbox 类型 radio | switch radio
value checkbox 值,单选类型需为string 或者 number, 多选类型为 array string | number | array null
maxItemNum 数据源超出多少可滚动 number 5
dataSource checkbox 数据源 Object null
onChange checkbox 更改回调 value => void null

Dialog.custom

自定义对话框。属性详情参见 Dialog 通用属性。Dialog.custom 另外包含以下 props:

属性 说明 类型 默认值 必传
header 自定义头部 ReactElement Function null
footer 自定义尾部 ReactElement Function null
content 自定义内容 any null

Dialog.close

关闭当前存在的对话框。