Implémentation de la fonctionnalité de pression longue à l'aide du gestionnaire de gestes React Native dans l'application React Native

Vous pouvez implémenter une fonctionnalité d'appui long à l'aide de bibliothèques telles que React Native Gesture Handler pour détecter le geste d'appui long. Cette bibliothèque offre des capacités de gestion des gestes plus avancées et plus fiables par rapport à l'événement React Native onLongPress standard.

Voici comment implémenter la fonctionnalité d'appui long pour afficher la version du microfrontend et d'autres informations sur l'application :

Étape 1 : Installer le gestionnaire de gestes natif React

Tout d'abord, si vous n'avez pas déjà installé le package react-native-gesture-handler, installez-le :

npm install react-native-gesture-handler

Assurez-vous de le lier à votre projet si vous utilisez React Native CLI :

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

Étape 2 : configurer le gestionnaire de gestes

Après l'installation, enveloppez votre application avec GestureHandlerRootView dans votre point d'entrée (généralement index.js ou 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>

Étape 3 : implémentez un appui long dans votre en-tête personnalisé

Maintenant, dans votre en-tête personnalisé, utilisez LongPressGestureHandler pour détecter l'événement d'appui long. Vous pouvez ensuite afficher une vue modale ou personnalisée affichant la version du microfrontend et d'autres informations sur l'application.

Voici un exemple de la façon dont vous pourriez mettre en œuvre cela :

<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>

Explication :

1. LongPressGestureHandler : enveloppez l'en-tête ou tout composant où vous souhaitez détecter un appui long.

   • minDurationMs={800} : ceci définit la durée pendant laquelle l'utilisateur doit appuyer pour déclencher l'événement d'appui long.
   • onHandlerStateChange : Cette méthode est déclenchée lorsque l'état du geste change.
   • Dans onLongPress, nous vérifions si le geste est à l'état ACTIF pour déterminer si l'appui long a réussi, puis déclenchons le modal pour afficher l'information.

2. Modal : Ceci est utilisé pour afficher la version du microfrontend et d'autres informations sur l'application lorsque l'événement d'appui long est déclenché.

Cette méthode détecte efficacement les appuis longs et affiche les informations requises sur le microfrontend et les détails de l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!