Dialog 自定义对话框

何时使用#

当Modal组件不能完全满足对话框内容布局的需求时，可使用

API#

Feedback#

属性	说明	类型	默认值
ref	名称，不写的话调用时找不到此组件	string	无
contentStyle	内容样式	obj	无
visible	初始化时是否显示	boolean	false
onShow	对话框onshow事件	function	无
onHide	对话框hide事件	function	无

代码演示

预览二维码


/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text,TouchableHighlight} from 'nuke-components';
import { Dialog } from 'nuke';
import {mount} from 'nuke-mounter';
import Util from 'nuke-util';
let Dimensions=Util.Dimensions;

let {height} = Dimensions.get('window');

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
    }

    showModal = () => {
        this.refs.modal.show();
    }

    hideModal = () => {
        this.refs.modal.hide();
    }

    onShow = (param) => {
        console.log('modal show', param);
    }

    onHide = (param) => {
        console.log('modal hide', param);
    }

    render() {
        return (
            <View style={styles.wrapper}>
                <TouchableHighlight style={styles.click} onPress={this.showModal}>
                  <Text>自定义对话框</Text>
                </TouchableHighlight>
                <Dialog ref="modal" contentStyle={styles.modalStyle} onShow={this.onShow} onHide={this.onHide}>
                    <View style={styles.body}>
                        <Text>
                          Conetnt
                        </Text>
                    </View>
                    <View style={styles.footer}>
                        <TouchableHighlight style={styles.button} onPress={this.hideModal}>
                            <Text>OK</Text>
                        </TouchableHighlight>
                    </View>
                    <TouchableHighlight style={styles.close} onPress={this.hideModal}>
                        <Text style={styles.closeText}>x</Text>
                    </TouchableHighlight>
                </Dialog>
            </View>

        );
    }
}
var styles = {
  wrapper: {
    height: height,
    paddingLeft: '24rem',
    paddingRight: '24rem',
    paddingTop: '24rem'
  },
  click: {
    height: '100rem',
    lineHeight: '100rem',
    textAlign: 'center',
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#ccc'
  },
  modalStyle: {
    width: '640rem',
    height: '340rem'
  },
  body: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#e5e5e5',
    height: '220rem'
  },
  footer: {
    alignItems: 'center',
    justifyContent: 'center',
    height: '120rem'
  },
  button: {
    width: '300rem',
    height: '60rem',
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#ccc',
    alignItems: 'center',
    justifyContent: 'center'
  },
  close: {
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#ccc',
    position: 'absolute',
    top: '-18rem',
    right: '-18rem',
    alignItems: 'center',
    justifyContent: 'center',
    width: '40rem',
    height: '40rem',
    borderRadius: '20rem',
    backgroundColor: '#ffffff'
  },
  closeText: {
    fontSize: '28rem',
    color: '#000000'
  }
};
mount(<App/>, mountNode);

按钮类型

普通按钮。