# Dimensions demo

* order: 0

获取屏幕宽高信息 for test

---

```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 wind = Dimensions.get('window');
alert(`height:${wind.height}`);
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="new  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 />);
```