React Native 判断 onPress 点击位置的实现方法

react native 判断 onPress 点击的是屏幕左边还是右边还是中间

在 React Native 中，你可以使用 onPress 事件处理器来判断用户点击的位置。为了判断点击��发生在屏幕的左边、中间还是右边，你需要获取点击事件的坐标信息。你可以使用 PanResponder 或 Touchable 组件来实现这一点。以下是一个使用 TouchableWithoutFeedback 和 onPress 事件处理器的示例：

import React from 'react';
import { View, Text, TouchableWithoutFeedback, Dimensions, StyleSheet } from 'react-native';

const App = () => {
  const handlePress = (event) => {
    const { locationX } = event.nativeEvent;
    const screenWidth = Dimensions.get('window').width;

    if (locationX < screenWidth / 3) {
      console.log('Clicked on the left side');
    } else if (locationX > (2 * screenWidth) / 3) {
      console.log('Clicked on the right side');
    } else {
      console.log('Clicked in the middle');
    }
  };

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={handlePress}>
        <View style={styles.touchableArea}>
          <Text>Tap anywhere</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  touchableArea: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

在这个示例中：

1. TouchableWithoutFeedback 组件包裹了一个 View，并且绑定了 onPress 事件处理器。
2. handlePress 函数接收点击事件，并从 event.nativeEvent 中获取点击的 locationX 坐标。
3. 使用 Dimensions.get('window').width 获取屏幕的宽度。
4. 根据点击的 locationX 坐标与屏幕宽度的比较，判断点击发生在左边、中间还是右边，并在控制台输出相应的信息。

你可以根据需要修改这个示例来适应你的应用程序。