React Native アプリケーションで React Native ジェスチャ ハンドラーを使用して長押し機能を実装する

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 ジェスチャ ハンドラーを使用して長押し機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。