Melaksanakan Kefungsian Tekan Lama Menggunakan Pengendali Gerak Isyarat Asli React dalam Aplikasi React Native-tutorial js-php.cn

Melaksanakan Kefungsian Tekan Lama Menggunakan Pengendali Gerak Isyarat Asli React dalam Aplikasi React Native

Susan Sarandon

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

asal

1109 orang telah melayarinya

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

Anda boleh melaksanakan fungsi tekan lama menggunakan perpustakaan seperti React Native Gesture Handler untuk mengesan gerak isyarat tekan lama. Pustaka ini menyediakan keupayaan pengendalian gerak isyarat yang lebih maju dan boleh dipercayai berbanding acara React Native onLongPress standard.

Begini cara anda boleh melaksanakan fungsi tekan lama untuk memaparkan versi microfrontend dan maklumat apl lain:

Langkah 1: Pasang Pengendali Gerak Isyarat Asli React

Pertama sekali, jika anda belum memasang pakej react-native-gesture-handler, pasangkannya:


npm install react-native-gesture-handler

Salin selepas log masuk

Pastikan untuk memautkannya dengan projek anda jika anda menggunakan React Native CLI:


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

Salin selepas log masuk

Langkah 2: Sediakan Pengendali Gerak Isyarat

Selepas pemasangan, bungkus apl anda dengan GestureHandlerRootView dalam titik masuk anda (biasanya index.js atau 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>

Salin selepas log masuk

Langkah 3: Laksanakan Tekan Lama dalam Pengepala Tersuai Anda

Sekarang, dalam pengepala tersuai anda, gunakan LongPressGestureHandler untuk mengesan acara akhbar lama. Anda kemudiannya boleh memaparkan mod atau paparan tersuai yang menunjukkan versi microfrontend dan maklumat apl lain.

Berikut ialah contoh cara anda boleh melaksanakan perkara ini:


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

Salin selepas log masuk

Penjelasan:

LongPressGestureHandler: Balut pengepala atau mana-mana komponen di mana anda ingin mengesan tekanan lama.
- minDurationMs={800}: Ini menentukan berapa lama pengguna perlu menekan untuk mencetuskan acara akhbar lama.
- onHandlerStateChange: Kaedah ini dicetuskan apabila keadaan gerak isyarat berubah.
- Di dalam onLongPress, kami menyemak sama ada gerak isyarat berada dalam keadaan AKTIF untuk menentukan sama ada tekan lama berjaya, dan kemudian mencetuskan mod untuk menunjukkan maklumat.
Modal: Ini digunakan untuk memaparkan versi microfrontend dan maklumat apl lain apabila acara akhbar lama dicetuskan.

Kaedah ini mengesan tekanan lama dengan cekap dan memaparkan maklumat yang diperlukan tentang bahagian hadapan mikro dan butiran apl.

Atas ialah kandungan terperinci Melaksanakan Kefungsian Tekan Lama Menggunakan Pengendali Gerak Isyarat Asli React dalam Aplikasi React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!