BottomModal 半页弹框

优质
小牛编辑
126浏览
2023-12-01

半页弹窗。

Usage

全部引入

import { BottomModal } from 'beeshell';

按需引入

import BottomModal from 'beeshell/dist/components/BottomModal';

Examples

image

Code

详细 Code

import { BottomModal } from 'beeshell';

<BottomModal
  title='选择品类'
  cancelable={true}
  leftCallback={() => {
    console.log('cancel')
  }}
  rightCallback={() => {
    console.log('confirm')
  }}>
  <View
    style={{
      backgroundColor: '#fff',
      height: 300,
      alignItems: 'center',
      justifyContent: 'center'
    }}>
    <Text>自定义内容</Text>
  </View>
</BottomModal>

API

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

Props

NameTypeRequiredDefaultDescription
titleContainerReactElementfalsenull自定义标题区域渲染内容
titlestringfalse'标题'标题文本
titleStyleTextStylefalse{}标题文本样式
leftLabelReactElementfalsenull自定义左边按钮渲染区域
leftLabelTextstringfalse'取消'左边按钮文本
leftLabelTextStyleTextStylefalse{}左边按钮文本样式
leftCallbackFunctionfalsenull左边按钮点击回调
rightLabelReactElementfalsenull自定义右边按钮渲染区域
rightLabelTextstringfalse'取消'右边按钮文本
rightLabelTextStyleTextStylefalse{}右边按钮文本样式
rightCallbackFunctionfalsenull右边按钮点击回调