react-原生TouchableOpacity的hitSlop获取动态宽度和高度

import React, { useRef } from 'react';
import { TouchableOpacity } from 'react-native';

const ParentComponent = () => {
  const touchableOpacityRef = useRef(null);

  return (
    <TouchableOpacity
      ref={touchableOpacityRef}
      onPress={() => console.log('TouchableOpacity pressed')}
    >
      {/* 子组件内容 */}
    </TouchableOpacity>
  );
}

export default ParentComponent;

import React, { useRef } from 'react';
import { TouchableOpacity } from 'react-native';

const ParentComponent = () => {
  const touchableOpacityRef = useRef(null);
  const hitSlop = { top: 10, bottom: 10, left: 10, right: 10 }; // 自定义扩展触摸区域大小

  const handleLayout = () => {
    const { width, height } = touchableOpacityRef.current.measure(function (x, y, width, height, pageX, pageY) {
      return { width, height };
    });

    // 在这里可以使用获取到的width和height来进行相关操作
    console.log(`TouchableOpacity width: ${width}, height: ${height}`);
  }

  return (
    <TouchableOpacity
      ref={touchableOpacityRef}
      onPress={() => console.log('TouchableOpacity pressed')}
      hitSlop={hitSlop}
      onLayout={handleLayout}
    >
      {/* 子组件内容 */}
    </TouchableOpacity>
  );
}

export default ParentComponent;