Question

我正在编写一个React Native应用程序，我想检测屏幕上任何位置的点击/点击，所以我在我的<View>元素上放了一个onClick处理程序，但它似乎没有工作。这是我的渲染功能：

<View style={styles.container} onClick={this.onClick}>
    <Text style={styles.welcome}>
        Tap to change the background
    </Text>
</View>

我需要做什么？

Answer 1

要使任何元素处理React-Native UI中的触摸/单击事件，您需要将元素放在TouchableOpacity，TouchableWithoutFeedback，TouchableNativeFeedback或TouchableHighlight元素中：

<TouchableHighlight onPress = { this.onClick }>
    <View style={styles.container}>
    <Text style={styles.welcome}>
        Tap to change the background
    </Text>
    </View>
</TouchableHighlight>

希望有所帮助。

Answer 2

在React Native版本> 55.3中，如果使用 onStartShouldSetResponder 道具，则将onPress事件签入View。

例如：

<View 
    style={{ flex: 1 }}
    onStartShouldSetResponder={() => console.log('You click by View')}
 >

    <ScrollView 
        refreshControl={
           <RefreshControl 
               refreshing={this.state.refreshing}
               onRefresh={this.onRefresh} />
           }
      >

     <Text>Awesome</Text>

    </ScrollView>
</View>

在示例中，我演示了如何在View上获取onPress事件，而不阻止其后的其他事件。刷新控件仍然可以正常工作。

Answer 3

就我而言，以下工作正常。您可以通过道具在任何onTouchStart上使用onTouchEnd和View处理程序，例如：

<View onTouchStart={() => this.doSomething()} />

More information

Answer 4

最简单的方法：

<TouchableOpacity style={styles.container} onPress={()=> whateverFunc(parameter)}>
    <Text style={styles.welcome}>
       Tap to change the background
    </Text>
</TouchableOpacity>

因此，您需要将“视图”组件替换为“ TouchableOpacity”或任何其他Touchable组件，并且还需要将“ onClick”道具替换为“ onPress”。就这样。完全不需要使用TouchableWhatever组件包装视图。

React Native检测点击View

4 个答案: