Modal
beeshell 组件库把所有基础组件分成一个个系列,如:Modal 系列、Form 系列、日历系列,每个系列内部使用继承的方式(ES6 Class)复用代码。
Modal 是 Modal 系列所有组件的父类,例如 SlideModal 就继承自 Modal 并做了相应的扩展,这些继承关系用户不需要关心,但知道了继承关系可以加深对组件的理解。
Install
npm install beeshell
Usage
引入方式
全部引入
import { Modal } from 'beeshell';
单独引入
import Modal from 'beeshell/components/Modal';
Examples
可以看到弹出内容比较简陋,弹出内容完全由用户自定义,定制化程度高,如果没有这么高的定制化需求,我们也提供了在 Modal 基础上的规范化封装组件(继承自 Modal),例如:ConfirmModal。
这里体现了我们组件库的设计思路,兼顾通用性与定制化,如果组件能满足用户的需求就直接使用,如果不能满足,用户可以继承组件作为父类自己做二次扩展。
Code
import { Modal } from 'beeshell';
class App extends React.Component {
render() {
<View>
<TouchableOpacity
onPress={() => {
this._modal.open();
}}>
<Text>基础用法</Text>
</TouchableOpacity>
<Modal
ref={(c) => { this._modal = c; }}
cancelable={true}>
<View>
<Text>ref 获取组件实例</Text>
<Text>
cancelable={'{'}true{'}'}
点击蒙层消失
</Text>
</View>
</Modal>
</View>
}
}
Props
Name | Type | Required | Default | Description |
---|---|---|---|---|
cancelable | Boolean | false | true | 点击蒙层是否消失 |
alignItems | String | false | ‘center’ | 不常用,弹出内容纵向位置 |
opacity | Number | false | 0.3 | 不常用,遮罩透明度 |
flex | Number | false | null | 不常用,值为 null 或者 1,弹出内容水平方向拉伸至全屏 |
marginHorizontal | Number | false | 0 | 不常用,弹出内容水平 margin |
marginTop | Number | false | 90 | 不常用,对应 alignItems: ‘flex-start’ |
marginBottom | Number | false | 90 | 不常用,对应 alignItems: ‘flex-end’ |
onOpen | Function | false | null | 打开弹窗回调 |
onOpened | Function | false | null | 打开弹窗后回调 |
onClose | Function | false | null | 关闭弹窗回调 |
onClosed | Function | false | null | 关闭弹窗后回调 |
Methods
.open()
打开弹窗。
this._modal.open();
.close()
关闭弹窗。
this._modal.close();