React Native 之 处理触摸事件

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
 
export default class TouchEventDemo extends Component {
  // 初始状态
  state = {
    touchCount: 0
  };
 
  // 增加触摸计数器
  incrementCount = () => {
    this.setState(prevState => ({ touchCount: prevState.touchCount + 1 }));
  };
 
  // 处理触摸开始事件
  handleTouchStart = () => {
    console.log('Touch started');
  };
 
  // 处理触摸结束事件
  handleTouchEnd = () => {
    console.log('Touch ended');
  };
 
  // 渲染组件
  render() {
    return (
      <View>
        <TouchableOpacity
          onPressIn={this.handleTouchStart}
          onPressOut={this.handleTouchEnd}
          onPress={this.incrementCount}>
          <View>
            <Text>Touch the screen</Text>
          </View>
        </TouchableOpacity>
        <Text>Touched {this.state.touchCount} times</Text>
      </View>
    );
  }
}

这段代码实现了一个简单的React Native组件，用于处理触摸事件。用户触摸屏幕时，会记录触摸次数，并在屏幕上显示。同时，在控制台中记录了触摸开始和结束的日志事件。这个例子展示了如何在React Native应用中处理用户的触摸事件。