画面全体でタッチイベントを取得する

Question

画面上の任意のタップでビューに戻したい消えているヘッダーがあります。しかし、を<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, 
    }, 
});