weex-nuke/src/node_modules/nuke-mask/docs/nopress.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Mask 遮罩层 Demo

* order: 1
* hide: true

Mask 模拟浮层效果

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Input from 'nuke-input';
import View from 'nuke-view';
import Text from 'nuke-text';
import Env from 'nuke-env';
import Checkbox from 'nuke-checkbox';
import Button from 'nuke-button';
import Mask from 'nuke-mask';
import Page from 'nuke-page';
const { isWeb } = Env;
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.GroupFruit = [
      { value: 'zj', label: '浙江' },
      { value: 'ah', label: '安徽' },
      { value: 'sh', label: '上海' }
    ];
    this.state = {
      fruitChecked: ['ah']
    };
  }
  showMask() {
    this.refs.myMask.show();
  }
  hideMask() {
    this.refs.myMask.hide();
  }

  onChange = value => {
    this.setState({
      fruitChecked: value
    });
  };
  render() {
    return (
      <Page title="Mask">
        <Page.Intro main="event" />
        <View style={{ height: 600, backgroundColor: 'yellow' }}>
          <Button type="primary" onPress={e => this.showMask()}>
            open mask
          </Button>
        </View>
        <View style={{ height: 600, backgroundColor: 'blue' }}>
          <Button
            type="primary"
            onPress={e => {
              alert(1234);
            }}
          >
            click
          </Button>
        </View>

        <Mask
          defaultVisible={false}
          ref="myMask"
          animate={true}
          style={styles.mask}
          contentStyle={styles.body}
        >
          <Text style={styles.text}>hi im in footer</Text>
        </Mask>
      </Page>
    );
  }
};
const styles = {
  mask: {
    // bottom: 0,
    top:
      (Math.round(screen.height / window.devicePixelRatio) - 100).toString() +
      'wx', //works in iOS,not in android
    // top:
    //   Math.round(screen.height / window.devicePixelRatio - 70).toString() +
    //   'wx',
    backgroundColor: 'red',
    height: '70wx',
    width: 750,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },

  text: {
    fontSize: 28,
    color: '#ffffff'
  }
};
render(<App />);
```