nuke-touchable/docs/basic.md

可点击容器

# Touchable 可点击容器

* order: 0
- title_en: Clickable container

可点击容器

---
```js
<NukePlayGround>
  <Touchable
    rippleEnabled={true}
    style={styles.touch}
    activeStyle={styles.touchActive}
    onPress={this.pressX.bind(this)}
  >
    <Text style={styles.touchText}>click me</Text>
  </Touchable>
</NukePlayGround>
```
---

```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';

function lineGradient(direction, start, end) {
  return {
    backgroundImage: `linear-gradient(to ${direction},${start},${end})`
  };
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }
  pressX = e => {
    this.setState({
      count: this.state.count + 1
    });
  };
  render() {
    return (
      <Page title="Touchable">
        <Page.Intro main="Normal" />
        <View style={styles.result}>
          {this.state.count ? (
            <Text style={styles.resultText}>点击 {this.state.count} 次</Text>
          ) : null}
        </View>
        <View style={styles.btns}>
          <Touchable
            rippleEnabled={true}
            style={styles.touch}
            activeStyle={styles.touchActive}
            onPress={this.pressX.bind(this)}
          >
            <Text style={styles.touchText}>click me</Text>
          </Touchable>
        </View>
      </Page>
    );
  }
}
const styles = {
  result: {
    height: '480rem',
    margin: '30rem',
    padding: '10rem',
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  resultText: {
    fontSize: '28rem'
  },
  btns: {
    margin: '30rem'
  },
  touch: {
    ...lineGradient('right', '#a1c4fd', '#c2e9fb'),
    height: 88,
    justifyContent: 'center',
    alignItems: 'center'
  },
  touchText: {
    color: '#0B2E68',
    fontSize: 28
  },
  touchActive: {
    ...lineGradient('right', '#8BB6F9', '#ACE2FB')
  }
};

render(<App />);
```