Получить сенсорное событие на весь экран

У меня есть исчезающий заголовок, который я хочу вернуть в виде одного касания в любом месте экрана. Но если я обертываю весь <View> внутри компонента <TouchableX>, PanResponder перестает работать. Есть ли взломы вокруг этого?

Ответ 1

Вам не нужно деформировать его с помощью компонента Touchable.

Добавьте следующие реквизиты в root View.

onResponderGrant - сделать View нажатием кнопки

onStartShouldSetResponder - запустите View начало записи

Ответ 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,
  },
});

Ответ 3

onResponderGrant не работает для меня, и я использую onTouchEnd для запуска при нажатии на экран, это будет работать