Reagieren Sie auf Native View onPress

In diesem Tutorial erfahren Sie, wie Sie onPress in einer React Native-Ansicht konfigurieren.

Reagieren Sie auf Native View onPress

Wir müssen onPress auf zahlreiche Szenarien setzen, wenn es um React Native-Komponenten geht, aber wir müssen es mit React Native Touchables umgeben.

Was wäre, wenn wir onPress für den View-Container selbst festlegen könnten? Möglich ist das mit onStartShouldSetResponder, das nur mit React Native Version 55.3 funktioniert. Lassen Sie es uns mit dem folgenden Code-Fence lernen.

Beispielcode:

import React from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={{
    flex: 1 }}>
      <View style={styles.container}>
        <View
          style={styles.innerView}
          onStartShouldSetResponder={() => alert('You have clicked on view')}
        >
          <Text style={styles.paragraph}>Click on a View</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 25,
    backgroundColor: '#72d4ed',
    padding: 8,
  },
  innerView: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 25,
    backgroundColor: '#f77979',
    marginTop: 200,
    marginBottom: 200,
    marginLeft: 20,
    marginRight: 20,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});
export default App;

Schaltflächen werden in allen Programmiersprachen verwendet, um Benutzerklickereignisse zu erfassen. In React Native können wir jedoch das Click-onPress-Ereignis auf der View-Komponente aktivieren, indem wir ihre onStartShouldSetResponder-Prop verwenden.

Weil wir die View-Komponente manchmal reaktionsfähig machen oder ein Ereignis auslösen müssen, wenn der Benutzer auf View klickt. Wir haben also die Eigenschaft onStartShouldSetResponder. Es funktioniert ähnlich wie das onPress-Ereignis der Schaltfläche und kann Funktionsaufrufe verarbeiten.

Wenn wir onStartShouldSetResponder auf true setzen, teilen wir unserem Gesten-Responder mit, dass diese Ansicht alle Bewegungsereignisse erhalten soll, die auf diesem Teil des Bildschirms auftreten.

Selbst wenn ich meine Hand über die Cursoransicht bewege, die das Kind eines Elternteils ist, sollte dies keine Wirkung haben, da nur der Elternteil darum gebeten hat, der Touch-Responder zu sein. Denken Sie daran, wir müssen es anfordern; Andernfalls ist es standardmäßig nicht interaktiv.

Ausgang:

Wenn Sie den Code ausführen, sehen Sie etwa Folgendes:

Wie Sie sehen können, gibt es eine Schaltfläche namens click on view; Wenn Sie darauf klicken, wird die Onpress-Methode ausgelöst, die ein Popup mit der Aufschrift Sie haben auf Ansicht geklickt anzeigt.