在整個屏幕上獲取觸摸事件

Question

我有一個正在消失的標題，我想在屏幕上的任意位置點擊一次。但是如果我將整個<View>包裝在<TouchableX>組件中，則PanResponder停止工作。這是否有黑客入侵？

Answer 1

您不需要使用Touchable組件進行變形。

將下一個道具添加到根View。

onResponderGrant - 讓View手柄觸摸

onStartShouldSetResponder - 讓View手柄開始

Answer 2

這將是一個onResponderGrant

import React, { Component } from 'react'; 
import { 
    Platform, 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity 
} from 'react-native'; 

const instructions = Platform.select({ 
    ios: 'Press Cmd+R to reload,\n' + 
    'Cmd+D or shake for dev menu', 
    android: 'Double tap R on your keyboard to reload,\n' + 
    'Shake or press menu button for dev menu', 
}); 

export default class App extends Component<{}> { 

    constructor() { 
    super(); 
    this.startTouch = this.startTouch.bind(this); 
    this.stopTouch = this.stopTouch.bind(this); 
    this.onTouchE = this.onTouchE.bind(this); 
    } 

    startTouch() { 
    console.debug("You start so don't stop!??"); 
    } 

    stopTouch() { 
    console.debug("Why you stop??"); 
    } 

    onTouchE() { 
    console.debug("Touchable Opacity is working!!"); 
    } 

    render() { 

    return (
     <View style={styles.container} 
      onResponderGrant = {() => this.startTouch() } 
      onResponderRelease = {() => this.stopTouch() } 
      onStartShouldSetResponder = { (e) => {return true} } 
      > 
      <TouchableOpacity 
      onPress = {() => this.onTouchE() } 
      > 
      <Text style={styles.welcome}> 
       Welcome to React Native! 
      </Text> 
      </TouchableOpacity> 
     <Text style={styles.instructions}> 
      To get started, edit App.js 
     </Text> 
     <Text style={styles.instructions}> 
      {instructions} 
     </Text> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: 'cornflowerblue', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
});