weex-nuke/lib/node_modules/nuke-dialog/docs/preview.md

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

# 对话框

* order: 2

静态调用图片预览

---

```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 ScrollView from 'nuke-scroll-view';
import Dialog from 'nuke-dialog';
import Button from 'nuke-button';
import Page from 'nuke-page';
import Image from 'nuke-image';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }
  show = () => {
    Dialog.show({
      content: (
        <View style={styles.inner}>
          <Image
            src="//gw.alicdn.com/tfs/TB1LPQYi5qAXuNjy1XdXXaYcVXa-1100-1100.png"
            style={{ flex: 1 }}
            resizeMode="contain"
          />
          <Button onPress={this.onPress}>设为主图</Button>
        </View>
      ),
      contentStyle: styles.container,
      style: styles.wrapper,
    });
  };

  render() {
    return (
      <Page title="Dialog Static">
        <Page.Intro main="show" />
        <Button style={styles.btn} type="primary" onPress={this.show}>
          图片预览
        </Button>
      </Page>
    );
  }
};
var styles = {
  wrapper: {
    backgroundColor: '#000000',
    flex: 1,
  },
  container: {
    width: 750,
    height: 1000,
    backgroundColor: 'transparent',
  },
  inner: {
    flex: 1,
    backgroundColor: 'transparent',
  },
};
render(<App />);
```