React Native 애플리케이션에서 React Native Gesture Handler를 사용하여 길게 누르기 기능 구현

React Native Gesture Handler와 같은 라이브러리를 사용하여 길게 누르기 동작을 감지하는 길게 누르기 기능을 구현할 수 있습니다. 이 라이브러리는 표준 React Native onLongPress 이벤트에 비해 더욱 발전되고 안정적인 제스처 처리 기능을 제공합니다.

마이크로프론트엔드 버전과 기타 앱 정보를 표시하기 위해 길게 누르기 기능을 구현하는 방법은 다음과 같습니다.

1단계: React Native Gesture Handler 설치

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

설명:

1. LongPressGestureHandler: 길게 누르기를 감지하려는 헤더 또는 구성 요소를 래핑합니다.

   • minDurationMs={800}: 길게 누르기 이벤트를 트리거하기 위해 사용자가 눌러야 하는 시간을 정의합니다.
   • onHandlerStateChange: 이 메소드는 제스처 상태가 변경될 때 트리거됩니다.
   • onLongPress 내부에서는 제스처가 ACTIVE 상태인지 확인하여 길게 누르기가 성공했는지 확인한 다음 모달을 트리거하여 정보를 표시합니다.

2. 모달: 길게 누르기 이벤트가 발생할 때 마이크로프런트엔드 버전 및 기타 앱 정보를 표시하는 데 사용됩니다.

이 방법은 길게 누르기를 효율적으로 감지하고 마이크로프런트엔드 및 앱 세부정보에 대한 필수 정보를 표시합니다.

위 내용은 React Native 애플리케이션에서 React Native Gesture Handler를 사용하여 길게 누르기 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!