JDDialog (支持lite版)

对话框组件

属性

show bool

用于控制是否显示

overlayStyle: style

膜层样式

dialogStyle style

对话框样式

onClose function

点击膜层时的回调方法

overlayClickable bool

膜层是否可以响应点击事件，默认为true

onRequestClose function

膜层关闭时的回调方法,仅Android支持

代码示例

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
} from 'react-native';
import {
  JDDevice,
  JDDialog,
  JDTouchable,
  JDThemeText,
  JDRouter
} from '@jdreact/jdreact-core-lib';
const { NavigationBar, nativeHistory } = JDRouter;

class JDDialogExample extends Component {
  state = {
    dialogShow: false
  }

  componentWillUnfocus() {
    if (this.state.dialogShow) {
      this._closeDialog('dialogShow');
      return true;
    }
    return false;
  }
  render() {
    return (
      <View style={styles.wrapper}>
        <NavigationBar Title="对话框组件" />
        <View style={styles.body}>
          <JDTouchable onPress={ () => {this._showDialog('dialogShow')} }>
            <View style={styles.btn}>
              <JDThemeText style={styles.btnText}>打开对话框</JDThemeText>
            </View>
          </JDTouchable>
        </View>

        { this._renderDialog() }
      </View>
    );
  }
  _renderDialog() {
    return (
      <JDDialog show={this.state.dialogShow} onClose={() => { this._closeDialog('dialogShow'); }}>
        <View style={styles.dialogContent}>
          <View style={styles.title}>
            <JDThemeText>提示</JDThemeText>
          </View>
          <View style={styles.dialogBody}>
            <JDThemeText>这里是内容！</JDThemeText>
          </View>
        </View>
      </JDDialog>
    );
  }

  _showDialog(key) {
    this.setState({
      [key]: true,
    });
  }

  _closeDialog(key) {
    this.setState({
      [key]: false,
    });
  }

  _onConfirm() {
    nativeHistory.goBack();
  }
}


const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  body: {
    flex: 1,
    padding: JDDevice.getRpx(20),
  },
  btn: {
    borderRadius: JDDevice.getDpx(4),
    backgroundColor: '#f23030',
    justifyContent: 'center',
    alignItems: 'center',
    height: JDDevice.getRpx(80),
    marginBottom: JDDevice.getRpx(20),
  },
  btnText: {
    color: '#FFF'
  },

  customDialogStyle: {
    borderWidth: 5,
    borderColor: '#F00'
  },

  dialogContent: {
  },
  title: {
    height: JDDevice.getRpx(80),
    borderBottomWidth: JDDevice.getDpx(1),
    borderColor: '#555',
    paddingLeft: JDDevice.getRpx(20),
    alignItems: 'center',
    justifyContent: 'center',
  },
  dialogBody: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: JDDevice.getRpx(20),
    height: JDDevice.getRpx(240),
  }
});

module.exports = JDDialogExample;

使用效果