在 React Native 應用程式中使用 React Native 手勢處理程序實現長按功能-js教程-PHP中文網

在 React Native 應用程式中使用 React Native 手勢處理程序實現長按功能

Susan Sarandon

發布： 2024-10-07 16:20:29

原創

1109 人瀏覽過

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

您可以使用 React Native Gesture Handler 等程式庫來實現長按功能來偵測長按手勢。與標準 React Native onLongPress 事件相比，該程式庫提供了更先進、更可靠的手勢處理功能。

以下是如何實現長按功能來顯示微前端版本和其他應用程式資訊：

第 1 步：安裝 React Native 手勢處理程序

首先，如果您尚未安裝 react-native-gesture-handler 軟體包，請安裝它：


npm install react-native-gesture-handler

登入後複製

如果您使用 React Native CLI，請確保將其與您的專案連結：


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

登入後複製

步驟 2：設定手勢處理程序

安裝後，在入口點（通常是index.js或App.js）中使用GestureHandlerRootView包裝您的應用程式。


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

登入後複製

步驟 3：在自訂標題中實現長按

現在，在自訂標頭中，使用 LongPressGestureHandler 來偵測長按事件。然後，您可以顯示模式或自訂視圖，其中顯示微前端版本和其他應用程式資訊。

以下是如何實現此功能的範例：


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

登入後複製

說明：

LongPressGestureHandler：將標題或任何要偵測長按的元件包裹起來。
- minDurationMs={800}：定義使用者需要按下多久才能觸發長按事件。
- onHandlerStateChange：當手勢狀態改變時觸發該方法。
- 在onLongPress中，我們檢查手勢是否處於ACTIVE狀態，以確定長按是否成功，然後觸發模態顯示訊息。
Modal：用於在長按事件觸發時顯示微前端版本和其他應用程式資訊。

此方法可以有效檢測長按並顯示有關微前端和應用程式詳細資訊的所需資訊。

以上是在 React Native 應用程式中使用 React Native 手勢處理程序實現長按功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！