# Mask 遮罩层 Demo

- order: 0

Mask 基础用法

---

````js

/** @jsx createElement */
import {createElement, Component,findDOMNode,render} from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Button from 'nuke-button';
import Mask from 'nuke-mask';
import Page from 'nuke-page';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state={
      maskVisible : false,
      log : ''
    }
    this.onShow = this.onShow.bind(this);
    this.onHide = this.onHide.bind(this);
    this.renderOverlay = this.renderOverlay.bind(this);
  }

  showMask(e){
    this.refs.myMask.show();
  }
  onVisibleChanged=(e)=>{
  }
  hideMask(e){
    this.refs.myMask.hide();
  }
  onShow(e){
    this.setState({log:this.state.log.concat('\n触发 onShow 事件')});
  }
  onHide(e){
    this.setState({log:this.state.log.concat('\n触发 onHide 事件')});
  }
  renderOverlay(){
    return (
      <View style={styles.dialogWrap}>
          <Text style={styles.text}>点击外层 mask 区域可关闭</Text>
          <Button type="primary" style={styles.btn} onPress={(e)=>this.hideMask(e)}>关闭</Button>
      </View>
    );
  }
  render() {
    return (
      <Page title="Mask">
        <Page.Intro main="普通用法"></Page.Intro>
        <Button type="primary" onPress={(e)=>this.showMask(e)}>打开浮层</Button>
        <Mask 
          onShow={this.onShow} 
          onHide={this.onHide} 
          defaultVisible={false} 
          onVisibleChanged={this.onVisibleChanged} 
          ref="myMask" 
          animate={false} 
          style={styles.mask}  
          maskClosable={true}
        >
          {this.renderOverlay()}
        </Mask>
        <Text style={{whiteSpace:'pre-wrap',fontSize:28,color:'grey'}}>{this.state.log}</Text>

      </Page>
    );
    }
}
const styles={
  mask:{
    flex:1,
    width:750,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor:'rgba(0,0,0,0.7)'
  },
  dialogWrap:{
    width:600,
    height: 300,
    padding:30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor:'#ffffff'
  },
  text:{
    marginBottom:20,
    fontSize:32,
    flex:1,
  }
}
render(<App/>);




````