Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
class ReactNativeComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      clicks: 0
    };
  }

  componentDidMount() {
    AppState.addEventListener('change', this.incrementClicks);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.incrementClicks);
  }

   // контекст со стрелочкой берется из окружения, а оно - текущий объект класса
  incrementClicks = () => {
    this.setState(prevState => {
      return {
        clicks: this.state.clicks + 1
      }
    });
  }

  render() {
    return (
        <View>
            <Text>`My Component ${this.state.clicks} clicks`</Text>
            <Text>this.props.headerText</Text>
            <TouchableHighlight
                underlayColor={colors.buttonsOverlayColor}
                onPress={this.incrementClicks}
                style={
                    {
                        width: 100,
                        height: 100,
                        backgroundColor:'red'
                    }
                }>
            </TouchableHighlight>
        </View>
    );
  }
}
</script>


<script id="jsbin-source-javascript" type="text/javascript">class ReactNativeComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      clicks: 0
    };
  }

  componentDidMount() {
    AppState.addEventListener('change', this.incrementClicks);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.incrementClicks);
  }

   // контекст со стрелочкой берется из окружения, а оно - текущий объект класса
  incrementClicks = () => {
    this.setState(prevState => {
      return {
        clicks: this.state.clicks + 1
      }
    });
  }

  render() {
    return (
        <View>
            <Text>`My Component ${this.state.clicks} clicks`</Text>
            <Text>this.props.headerText</Text>
            <TouchableHighlight
                underlayColor={colors.buttonsOverlayColor}
                onPress={this.incrementClicks}
                style={
                    {
                        width: 100,
                        height: 100,
                        backgroundColor:'red'
                    }
                }>
            </TouchableHighlight>
        </View>
    );
  }
}
</script></body>
</html>