Actionsheet

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

Usage

引入方式

全部引入

1. import { Actionsheet } from 'beeshell';

单独引入

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

Examples

image

Code

1. import { Actionsheet } from 'beeshell';

3. class App extends React.Component {
4. render() {
5. <View>
6. <TouchableOpacity
7. onPress={() => {
8. this._actionSheet.open();
9. }}>
10. <Text>Actionsheet</Text>
11. </TouchableOpacity>

13. <Actionsheet
14. ref={(c) => { this._actionSheet = c; }}
15. title="选择品类"
16. textKey="text"
17. options={[
18. {
19. text: '选项1',
20. value: '1'
21. },
22. {
23. text: '选项2',
24. value: '2',
25. },
26. {
27. text: '选项3',
28. value: '3'
29. },
30. ]}
31. cancelable={false}
32. confirmCallback={(item) => {
33. console.log('confirm');
34. }}
35. cancelCallback={() => {
36. console.log('cancel')
37. }}>
38. </Actionsheet>
39. </View>
40. }
41. }

Props

Name Type Required Default Description
cancelable Boolean false true 点击蒙层是否消失
title String false ‘标题’ 标题
heading ReactElement false null 自定义头部，默认情况下头部样式已经定义好，只需提供 title（在头部内部）即可。若头部样式不符合需求，可以使用 React 组件完全自定义头部，此时 title 配置会被忽略
options Array true [] 数据源，数组中是对象
textKey String true ‘’ 要展示数据源中的对象 key
cancelCallback Function false null 取消按钮点击回调
confirmCallback Function false null 确认回调

Methods

.open()

打开弹窗。

1. this._actionSheet.open();

.close()

关闭弹窗。

1. this._actionSheet.close();

其他

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