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();
    this.state = {
      count: 0,
    };
  }
    press = (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 style={styles.touch} activeStyle={{ backgroundColor: '#1170bc' }} onPress={this.press.bind(this)}>
              <Text style={styles.touchText}>点击</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: {
    backgroundColor: '#3089dc',
    height: '56rem',
    justifyContent: 'center',
    alignItems: 'center',
  },
  touchText: {
    color: '#ffffff',
    fontSize: '28rem',
  },
};

render(<App />);