# Env Demo

* order: 0

获取设备、系统等信息

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Env from 'nuke-env';
import Page from 'nuke-page';
const { isWeex, isWeb, isQNWeb, isQNWeex, appInfo, params } = Env;

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    console.log(Env);
  }
  renderAppInfo = () => {
    return Object.keys(appInfo).map(key => {
      const str = `- [${key}] ${appInfo[key]}`;
      return <Text style={styles.resultText}>{str}</Text>;
    });
  };

  renderParamInfo = () => {
    return Object.keys(params).map(key => {
      const str = ` - [${key}] ${params[key]}`;
      return <Text style={styles.resultText}>{str}</Text>;
    });
  };

  render() {
    return (
      <Page title="Env">
        <Page.Intro main="获取系统变量信息" />
        <View style={styles.result}>

          <Text style={styles.resultText}>isWeex:{isWeex}</Text>
          <Text style={styles.resultText}>isWeb:{isWeb}</Text>
          <Text style={styles.resultText}>appInfo:</Text>
          {this.renderAppInfo()}
          <Text style={styles.resultText}>data:</Text>
          {this.renderParamInfo()}
          <Text style={styles.resultText}>
            iOS:{appInfo.platform === 'iOS'}
          </Text>
          <Text style={styles.resultText}>appName:{appInfo.appName}</Text>

        </View>
      </Page>
    );
  }
};
const styles = {
  result: {
    minHeight: '480rem',
    margin: '30rem',
    padding: '10rem',
    backgroundColor: '#ffffff',
    // justifyContent: 'center',
    // alignItems: 'center'
  },
  resultText: {
    fontSize: '28rem',
    lines: 5,
    wordBreak: 'break-all', //for web
  },
  btns: {
    margin: '30rem',
  },
};
render(<App />);
```