weex-nuke/lib/node_modules/nuke-slip/theme/index.jsx

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

/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Slip from 'nuke-slip';
import Button from 'nuke-button';
import Dimensions from 'nuke-dimensions';
import Image from 'nuke-image';
import { StyleProvider } from 'nuke-theme-provider';
import {
  decodeVar,
  DemoContainer,
  DemoSection,
  Demo,
  DemoItem,
  initDemo,
} from '@alife/nuke-demo-helper';

const { height } = Dimensions.get('window');
const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.slipFromBottom = this.slipFromBottom.bind(this);

    this.closeSlip = this.closeSlip.bind(this);
  }

  slipFromBottom() {
    debugger;
    this.refs.slip4.wrappedInstance.show();
  }
  componentDidMount() {
    this.refs.slip4.wrappedInstance.show();
  }

  closeSlip() {
    this.refs.slip5.wrappedInstance.hide();
  }
  render() {
    return (
      <StyleProvider style={decodeVar(this.props.variable)}>
        <DemoContainer>
          <DemoSection title="各种方向的浮层">
            <Demo>
              <DemoItem direction="column">
                <Slip
                  ref="slip4"
                  defaultVisible
                  direction="bottom"
                  height={600}
                  maskClosable={false}
                />
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};
const style = {
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  btn: {
    marginBottom: 20,
  },
  icon: {
    fontSize: 42,
    position: 'absolute',
    top: 20,
    right: 20,
  },
  contentStyle: {
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  },
  body: {
    width: 600,
    height: parseInt(height) - 400,
    backgroundColor: '#ffffff',
  },
  img: {
    width: 600,
    height: parseInt(height) - 400,
    quality: 'original',
  },
  close: {
    borderRadius: 60,
    width: 120,
    height: 120,
    position: 'absolute',
    backgroundColor: 'transparent',
    bottom: 40,
    left: 315,
    justifyContent: 'center',
    alignItems: 'center',
    color: '#ffffff',
  },
  iconBottom: {
    fontSize: 32,

    color: '#ffffff',
  },
};
window.renderDemo = function (lang, variable) {
  render(<App variable={variable} />);
};


renderDemo('en-us', window.THEME_VARIABLE);

initDemo('slip');