PageModal

继承自 SlideModal 组件,属于 Modal 系列。

Install

  1. npm install beeshell

Usage

引入方式

全部引入

  1. import { PageModal } from 'beeshell';

单独引入

  1. import PageModal from 'beeshell/modules/PageModal';

Examples

image

在 SlideModal 基础上做的扩展,提供了规范化的头部,包含标题,确定、取消按钮,body 部分自定义。

Code

  1. import { PageModal } from 'beeshell';
  2. class App extends React.Component {
  3. render() {
  4. <View>
  5. <TouchableOpacity
  6. onPress={() => {
  7. this._pageModal.open();
  8. }}>
  9. <Text>带头部的底部上拉</Text>
  10. </TouchableOpacity>
  11. <PageModal
  12. ref={(c) => { this._pageModal = c; }}
  13. title="选择品类"
  14. cancelable={true}
  15. cancelCallback={() => {
  16. }}
  17. confirmCallback={() => {
  18. }}>
  19. <Text>ref 获取组件实例</Text>
  20. <Text>title="标题"</Text>
  21. <Text>
  22. cancelCallback={'{'}() => {'{'}{'}'} {'}'}
  23. '取消'回调
  24. </Text>
  25. <Text>
  26. confirmCallback={'{'}() => {'{'}{'}'} {'}'}
  27. '确认'回调
  28. </Text>
  29. </PageModal>
  30. </View>
  31. }
  32. }

Props

Name Type Required Default Description
cancelable Boolean false true 点击蒙层是否消失
title String false ‘标题’ 标题
cancelCallback Function false null 取消按钮点击回调
confirmCallback Function false null 确认按钮点击回调
confirmText String false ‘ 完成’ 完成按钮文字

Methods

.open()

打开弹窗。

  1. this._pageModal.open();

.close()

关闭弹窗。

  1. this._pageModal.close();

其他

继承 SlideModal 组件的所有 Props、Methods。