weex-nuke/src/node_modules/nuke-dimensions/docs/basic.md

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

# Dimensions demo

- title_en: get the height & width
- order: 0

获取屏幕宽高信息

---

```js
<NukePlayGround>
  // get window height & width;
  const {height, width} = Dimensions.get('window');

  // get screen height & width 
  const {height, width} = Dimensions.get('screen');
</NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Page from 'nuke-page';
import Dimensions from 'nuke-dimensions';
import Button from 'nuke-button';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      width: 0,
      height: 0
    };
  }
  press = () => {
    let { height, width } = Dimensions.get('window');
    this.setState({
      width: width,
      height: height
    });
  };
  render() {
    return (
      <Page title="Dimensions">
        <View style={styles.result}>
          {this.state.width ? (
            <Text style={styles.resultText}>
              屏幕宽度：
              {this.state.width} rem，高度
              {this.state.height} rem
            </Text>
          ) : null}
        </View>
        <View style={styles.btns}>
          <Button style={styles.btn} block onPress={this.press} type="primary">
            获取
          </Button>
        </View>
      </Page>
    );
  }
};
const styles = {
  result: {
    height: '480rem',
    margin: '30rem',
    padding: '10rem',
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  resultText: {
    fontSize: '28rem'
  },
  btns: {
    margin: '30rem'
  },
  btn: {
    marginBottom: '30rem'
  }
};
render(<App />);
```