时间戳

首页 > 解决方案 > 我如何知道 TouchableOpacity 的哪一侧被按下？

react-native - 我如何知道 TouchableOpacity 的哪一侧被按下？

问题描述

我想根据 TouchableOpacity 的左侧或右侧被按下来运行不同的逻辑。

我打算使用 event.nativeEvent 的 locationX 属性来了解被触摸的位置。但我不确定在哪里可以获得 TouchableOpacity 的当前宽度来进行数学计算。

onPress={(event) => {
              if (event.nativeEvent.locationX >= (the_width / 2)
                    //right side or exact center was pressed
              else
                    //left side was pressed
}}

任何帮助，将不胜感激。谢谢！

标签： react-nativetouchableopacity

解决方案

首先添加对您的组件的引用

myref = useRef();

<TouchableOpacity
ref = {myref}
>

</TouchableOpacity>

现在，当加载组件时，使用 useEffect 测量组件

useEffect(()=>{


myref.measure( (fx, fy, width, height, px, py) => {
            console.log('Component width is: ' + width)
            console.log('Component height is: ' + height)
            console.log('X offset to frame: ' + fx)
            console.log('Y offset to frame: ' + fy)
            console.log('X offset to page: ' + px)
            console.log('Y offset to page: ' + py)
        })        


},[])

现在将这些值保存在状态中，您可以在按下时进行一些计算。

推荐阅读