ConfirmModal

继承自 Modal 组件，属于 Modal 系列，包含标题，确认、取消按钮，body 部分支持简单字符串与 React 组件。

Install

1. npm  install beeshell

Usage

引入方式

全部引入

1. import { ConfirmModal } from 'beeshell';

单独引入

1. import ConfirmModal from 'beeshell/components/Modal/extensions/ConfirmModal';

Examples

简单文案

如果 body 部分只是想展示简单的文案，可以设置 body=”只提供简单文案”，设置了 body 属性非空后，子组件的内容不再展示。

代码如下：

1. <ConfirmModal
2. ref={(c) => { this._confirmModal = c; }}
3. title="是否退出编辑？"
4. body="只提供简单文案"
5. cancelable={false}
6. cancelCallback={() => {
7. console.log('cancel');
8. }}
9. confirmCallback={() => {
10. console.log('confirm');
11. }}>
12. </ConfirmModal>

自定义子组件

body 部分为自定义组件，注意设置属性 body=”” 才会展示子组件。

代码如下：

1. <ConfirmModal
2. ref={(c) => { this._confirmModal = c; }}
3. title="是否退出编辑？"
4. body=""
5. cancelable={false}
6. cancelCallback={() => {
7. console.log('cancel');
8. }}
9. confirmCallback={() => {
10. console.log('confirm');
11. }}>

13. <View style={{flex: 1}}>
14. <Image
15. style={{ height: 150 }}
16. source={{ uri: 'https://b-ssl.duitang.com/uploads/item/201503/15/20150315221839_MhjcK.thumb.700_0.jpeg' }}
17. />
18. </View>
19. </ConfirmModal>

一个按钮

只提供一个回调函数就会实现只有一个按钮的效果。

Code

1. import { ConfirmModal } from 'beeshell';

3. class App extends React.Component {
4. render() {
5. <View>
6. <TouchableOpacity
7. onPress={() => {
8. this._confirmModal.open();
9. }}>
10. <Text>包含标题，确认、取消按钮</Text>
11. </TouchableOpacity>

13. <ConfirmModal
14. ref={(c) => { this._confirmModal = c; }}
15. title="是否退出编辑？"
16. body="只提供简单文案"
17. cancelable={false}
18. cancelCallback={() => {
19. console.log('cancel');
20. }}
21. confirmCallback={() => {
22. console.log('confirm');
23. }}>
24. </ConfirmModal>
25. </View>
26. }
27. }

Props

Methods

.open()

打开弹窗。

1. this._confirmModal.open();

.close()

关闭弹窗。

1. this._confirmModal.close();

其他

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