weex-nuke/src/node_modules/nuke-touchable/docs/ripple.md

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

# Touchable Demo

* order: 0

可点击容器

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import Page from 'nuke-page';

class App extends Component {
  constructor() {
    super();
  }
  pressX = e => {};
  render() {
    return (
      <Page title="Touchable">
        <Page.Intro main="Ripple" />
        <Touchable
          rippleEnabled={true}
          style={[styles.btn, styles.btnNormalRed]}
          activeStyle={styles.btnNormalRedActive}
          onPress={this.pressX.bind(this)}
        >
          <Text style={styles.btnNormalRedText}>click me</Text>
        </Touchable>
        <Touchable
          style={[styles.btn, styles.btnNormalRed]}
          activeStyle={styles.btnNormalRedActive}
          onPress={this.pressX.bind(this)}
        >
          <Text style={styles.btnNormalRedText}>click me</Text>
        </Touchable>
        <Touchable
          rippleEnabled={true}
          style={[styles.btn, styles.btnPrimaryBlue]}
          activeStyle={styles.btnPrimaryBlueActive}
          onPress={this.pressX.bind(this)}
        >
          <Text style={styles.btnPrimaryBlueText}>click me</Text>
        </Touchable>
        <Touchable
          style={[styles.btn, styles.btnPrimaryBlue]}
          activeStyle={styles.btnPrimaryBlueActive}
          onPress={this.pressX.bind(this)}
        >
          <Text style={styles.btnPrimaryBlueText}>click me</Text>
        </Touchable>
      </Page>
    );
  }
}
const styles = {
  btn: {
    height: 88,
    marginBottom: 30,
    justifyContent: 'center',
    alignItems: 'center'
  },
  btnNormalRed: {
    backgroundColor: '#ffffff',
    color: '#f44336',
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: '#f44336'
  },
  btnNormalRedText: {
    color: '#f44336'
  },
  btnNormalRedActive: {
    backgroundColor: '#f44336'
  },
  btnPrimaryBlue: {
    backgroundColor: '#0089BA'
  },
  btnPrimaryBlueActive: {
    backgroundColor: '#845EC2'
  },
  btnPrimaryBlueText: {
    color: '#ffffff'
  }
};

render(<App />);
```