React Native View onPress

Shiv Yadav 2024年2月15日
React Native View onPress

このチュートリアルでは、React Native ビューで onPress を構成する方法を説明します。

React Native View onPress

React Native コンポーネントを扱う場合、多くのシナリオで onPress を設定する必要がありますが、React Native Touchable で囲む必要があります。

View コンテナ自体に onPress を設定できたらどうでしょうか? React Native バージョン 55.3 でのみ動作する onStartShouldSetResponder で可能です。 以下のコードフェンスで学習しましょう。

コード例:

import React from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={{
    flex: 1 }}>
      <View style={styles.container}>
        <View
          style={styles.innerView}
          onStartShouldSetResponder={() => alert('You have clicked on view')}
        >
          <Text style={styles.paragraph}>Click on a View</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 25,
    backgroundColor: '#72d4ed',
    padding: 8,
  },
  innerView: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 25,
    backgroundColor: '#f77979',
    marginTop: 200,
    marginBottom: 200,
    marginLeft: 20,
    marginRight: 20,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});
export default App;

ボタンは、ユーザーのクリック イベントをキャプチャするために、すべてのプログラミング言語で使用されます。 ただし、リアクティブ ネイティブでは、その onStartShouldSetResponder Prop を使用して、View コンポーネントのクリック onPress イベントをアクティブにすることができます。

View コンポーネントを時々レスポンシブにするか、ユーザーが View をクリックしたときにイベントを発生させる必要があるためです。 したがって、onStartShouldSetResponder プロパティがあります。 ボタンの onPress イベントと同様に機能し、関数呼び出しを処理する場合があります。

onStartShouldSetRespondertrue に設定すると、ジェスチャ レスポンダーに、このビューが画面のこの部分で発生するすべてのモーション イベントを取得する必要があることを伝えます。

親の子であるカーソル ビューの上に手を移動しても、親だけがタッチ レスポンダーになるように要求しているため、何の効果もありません。 リクエストする必要があることを忘れないでください。 そうしないと、デフォルトでインタラクティブになりません。

出力:

コードを実行すると、次のように表示されます。

react native view onpress - onpress

ご覧のとおり、クリック オン ビュー というボタンがあります。 それをクリックすると、onpress メソッドがトリガーされ、You have click on view というポップアップが表示されます。

react native view onpress - onpress popup

著者: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

関連記事 - React Native