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