Question

我有这样的结构：

<View style={container}>
    <View style={first}></View>
    <View style={second}><View>
    <View style={third}</View>
</View>

容器几乎充满了整个屏幕。

当用户触摸容器并在不抬起手指的情况下四处移动手指时，我想知道手指当前位于哪个View上。

Answer 1

使用TouchableWithoutFeedback环绕视图，然后可以调用onPressIn函数来检测触摸事件。

Answer 2

除非并且直到您没有任何触摸事件，否则您无法检测到触摸的视图。

为此，您可以使用TouchableOpacity（响应新闻并在触摸时具有视觉反馈。）或TouchableWithoutFeedback（触摸时不会显示任何视觉反馈）

下面是所需的示例示例：

import React, { Component } from 'react'
import {
  TouchableOpacity,
  View
} from 'react-native'

export default class SampleComponent extends Component {

    constructor(props) {
        super(props)

    }

    _onPressView = (viewName) => {
        console.log("Tapped View ===> ", viewName)
      }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={() => this._onPressView("FirstView")}>
                    <View style={styles.first}/>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this._onPressView("SecondView")}>
                    <View style={styles.second}/>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this._onPressView("ThirdView")}>
                    <View style={styles.third}/>
                </TouchableOpacity>
            </View>
        );
    }
}

如何检测手指当前在哪个<View>上？

2 个答案: