weex-nuke/docs/view/demo/pane.md

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

# View demo

- order: 1

使用 View + 动画 实现一个简单的面板布局

---

```js
/** @jsx createElement */
import { View, Dimensions, Transition, Button, Text } from 'weex-nuke';
import { createElement, Component, render, findDOMNode } from 'rax';
const { width, height } = Dimensions.get('window');
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      showSide: false
    };
  }
  transition = (box, styles, cb) => {
    Transition(
      box,
      styles,
      {
        timingFunction: 'ease-in', //ease-in,ease-in-out,ease-out,linear,cubic-bezier
        delay: 0,
        duration: 300
      },
      function() {
        cb && cb.call(this);
      }
    );
  };
  showSide = () => {
    let styles = this.state.showSide
      ? { transform: 'translateX(0)' }
      : { transform: 'translateX(200)' };
    let box = findDOMNode(this.refs.side);
    this.transition(box, styles, () => {
      this.setState({ showSide: !this.state.showSide });
    });
  };
  render() {
    return (
      <View style={styles.container}>
        <View x="main" ref="main" style={styles.main}>
          <Button type="primary" onPress={this.showSide}>
            展开/折叠面板
          </Button>
        </View>
        <View x="side" ref="side" style={styles.side}>
          <View style={styles.menu}>
            <Text style={styles.menuText}>1个内容</Text>
          </View>
          <View style={styles.menu}>
            <Text style={styles.menuText}>2个内容</Text>
          </View>
          <View style={styles.menu}>
            <Text style={styles.menuText}>3个内容</Text>
          </View>
        </View>
      </View>
    );
  }
};
const styles = {
  container: {
    flex: 1,
    position: 'relative',
    flexDirection: 'row'
  },
  side: {
    width: 200,
    left: -200,
    top: 0,
    position: 'absolute',
    height: parseInt(height, 10),
    backgroundColor: '#3089dc'
  },
  main: {
    width: width,
    height: height,
    justifyContent: 'center',
    backgroundColor: '#eeeeee'
  },
  menu: {
    height: 80,
    justifyContent: 'center',
    // alignItems:'center',
    paddingLeft: 20
  },
  menuText: {
    color: '#ffffff'
  }
};
render(<App />);
```