Implementierung der Long-Press-Funktionalität mithilfe des React Native Gesture Handler in der React Native-Anwendung-js-Tutorial-php.cn

Implementierung der Long-Press-Funktionalität mithilfe des React Native Gesture Handler in der React Native-Anwendung

Susan Sarandon

Freigeben： 2024-10-07 16:20:29

Original

1109 Leute haben es durchsucht

Implementing Long Press Functionality Using React Native Gesture Handler in React Native Application

Sie können die Funktion für langes Drücken mithilfe von Bibliotheken wie React Native Gesture Handler implementieren, um die Geste für langes Drücken zu erkennen. Diese Bibliothek bietet im Vergleich zum standardmäßigen React Native onLongPress-Ereignis erweiterte und zuverlässigere Gestenverarbeitungsfunktionen.

So können Sie die Funktion „Langes Drücken“ implementieren, um die Microfrontend-Version und andere App-Informationen anzuzeigen:

Schritt 1: Installieren Sie den React Native Gesture Handler

Wenn Sie das Paket react-native-gesture-handler noch nicht installiert haben, installieren Sie es zunächst:


npm install react-native-gesture-handler

Nach dem Login kopieren

Stellen Sie sicher, dass Sie es mit Ihrem Projekt verknüpfen, wenn Sie React Native CLI verwenden:


<p>npx react-native link react-native-gesture-handler</p>

Nach dem Login kopieren

Schritt 2: Gesten-Handler einrichten

Verbinden Sie Ihre App nach der Installation mit GestureHandlerRootView in Ihrem Einstiegspunkt (normalerweise index.js oder App.js).


<p>import { GestureHandlerRootView } from 'react-native-gesture-handler';<br>
import { App } from './App';</p>

<p>export default function Main() {<br>
  return (<br>
    <GestureHandlerRootView style={{ flex: 1 }}><br>
      <App /><br>
    </GestureHandlerRootView><br>
  );<br>
}</p>

Nach dem Login kopieren

Schritt 3: Implementieren Sie Long Press in Ihrem benutzerdefinierten Header

Verwenden Sie nun in Ihrem benutzerdefinierten Header den LongPressGestureHandler, um das Ereignis „Langes Drücken“ zu erkennen. Anschließend können Sie eine modale oder benutzerdefinierte Ansicht mit der Microfrontend-Version und anderen App-Informationen anzeigen.

Hier ist ein Beispiel, wie Sie dies umsetzen könnten:


<p>import React, { useState } from 'react';<br>
import { Text, View, Modal, StyleSheet } from 'react-native';<br>
import { LongPressGestureHandler, State } from 'react-native-gesture-handler';</p>

<p>const CustomHeader = ({ microfrontendVersion, appInfo }) => {<br>
  const [isModalVisible, setModalVisible] = useState(false);</p>

<p>const onLongPress = (event) => {<br>
    if (event.nativeEvent.state === State.ACTIVE) {<br>
      // Show the modal with app info when long press is detected<br>
      setModalVisible(true);<br>
    }<br>
  };</p>

<p>return (<br>
    <View><br>
      {/* LongPressGestureHandler wraps the part of the UI where long press is to be detected <em>/</em>}<br>
      <LongPressGestureHandler onHandlerStateChange={onLongPress} minDurationMs={800}><br>
        <View style={styles.header}><br>
          <Text style={styles.headerTitle}>My Custom Header</Text><br>
        </View><br>
      </LongPressGestureHandler><br>
<br>
      {/ Modal to show the version and app info */}<br>
      <Modal<br>
        transparent={true}<br>
        visible={isModalVisible}<br>
        onRequestClose={() => setModalVisible(false)}<br>
      ><br>
        <View style={styles.modalContainer}><br>
          <View style={styles.modalContent}><br>
            <Text>Microfrontend Version: {microfrontendVersion}</Text><br>
            <Text>App Info: {appInfo}</Text><br>
            <Text onPress={() => setModalVisible(false)} style={styles.closeButton}>Close</Text><br>
          </View><br>
        </View><br>
      </Modal><br>
    </View><br>
  );<br>
};</p>

<p>const styles = StyleSheet.create({<br>
  header: {<br>
    padding: 16,<br>
    backgroundColor: '#6200EE',<br>
  },<br>
  headerTitle: {<br>
    color: 'white',<br>
    fontSize: 18,<br>
    fontWeight: 'bold',<br>
  },<br>
  modalContainer: {<br>
    flex: 1,<br>
    justifyContent: 'center',<br>
    alignItems: 'center',<br>
    backgroundColor: 'rgba(0, 0, 0, 0.5)',<br>
  },<br>
  modalContent: {<br>
    backgroundColor: 'white',<br>
    padding: 20,<br>
    borderRadius: 10,<br>
  },<br>
  closeButton: {<br>
    marginTop: 10,<br>
    color: 'blue',<br>
    textAlign: 'center',<br>
  },<br>
});</p>

<p>export default CustomHeader;</p>

Nach dem Login kopieren

Erklärung:

LongPressGestureHandler: Wickeln Sie den Header oder eine beliebige Komponente dort ein, wo Sie ein langes Drücken erkennen möchten.
- minDurationMs={800}: Dies definiert, wie lange der Benutzer drücken muss, um das Ereignis „Langes Drücken“ auszulösen.
- onHandlerStateChange: Diese Methode wird ausgelöst, wenn sich der Status der Geste ändert.
- In onLongPress prüfen wir, ob sich die Geste im Status AKTIV befindet, um festzustellen, ob das lange Drücken erfolgreich war, und lösen dann das Modal aus, um die Informationen anzuzeigen.
Modal: Dies wird verwendet, um die Microfrontend-Version und andere App-Informationen anzuzeigen, wenn das lange Druckereignis ausgelöst wird.

Diese Methode erkennt effizient langes Drücken und zeigt die erforderlichen Informationen über das Microfrontend und die App-Details an.

Das obige ist der detaillierte Inhalt vonImplementierung der Long-Press-Funktionalität mithilfe des React Native Gesture Handler in der React Native-Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!