HOWTO · React Native
React Native View onPress
この記事では、反応ネイティブで 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 イベントと同様に機能し、関数呼び出しを処理する場合があります。
onStartShouldSetResponder を true に設定すると、ジェスチャ レスポンダーに、このビューが画面のこの部分で発生するすべてのモーション イベントを取得する必要があることを伝えます。
親の子であるカーソル ビューの上に手を移動しても、親だけがタッチ レスポンダーになるように要求しているため、何の効果もありません。 リクエストする必要があることを忘れないでください。 そうしないと、デフォルトでインタラクティブになりません。
出力：
コードを実行すると、次のように表示されます。
ご覧のとおり、クリック オン ビュー というボタンがあります。 それをクリックすると、onpress メソッドがトリガーされ、You have click on view というポップアップが表示されます。
