Question

描述

Modal 提供了弹出遮罩层的能力，为 Alert, Confirm 等对话框组件提供了底层能力。

安装

$ npm install rax-modal --save

属性

属性	类型	默认值	必填	描述	支持
visible	boolean	-	✘	控制弹层是否显示
contentStyle	Object	-	✘	自定义内容容器样式
maskStyle	Object	-	✘	自定义弹层样式
onShow	function	-	✘	当弹层显示的时候触发回调
onHide	function	-	✘	当弹层关闭的时候触发回调
maskCanBeClick	boolean	true	✘	是否可以通过点击背景蒙层关闭弹层
delay	number	0	✘	弹层延迟出现的时间，单位为毫秒
duration	number /[number, number]	[300, 300]	✘	动画持续时间(毫秒), 如果是数组，则分别表示打卡动画时间和关闭动画时间

示例

基础用法

import { createElement, render } from 'rax';
import Modal from 'rax-modal';
import DriverUniversal from 'driver-universal';

const App = (props) => {
  const [visible, setVisible] = useState(false);
  return ([
    <View onClick={() => setVisible(true)}><Text>open</Text></View>
    <Modal
      visible={visible}
      onHide={() => {
        setVisible(false)
      }}
    >
      <Text>Hello, world</Text>
    </Modal>
  ]);
}

render(<App />,  document.body, {driver: DriverUniversal);