React Native:View onPressが機能しない


104

私は奇妙な問題に直面しています。リアクションネイティブアプリで、onPressイベントを設定したView場合はトリガーされませんが、これをTextinside に設定した場合は起動Viewします。ここで何が欠けていますか?

<View style={{backgroundColor: "red", padding: 20}}>
  <Text onPress={()=> {
    console.log('works');
    }
  }>X</Text>
</View>


<View style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</View>

これはなぜですか?これはReact Nativeの問題ですか?バージョン0.43を使用しています

回答:


175

あなたは使用することができるTouchableOpacityためonPressのイベント。 小道具をView提供していませんonPress

<TouchableOpacity style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</TouchableOpacity>

4
完全なリファレンスドキュメントはこちら:facebook.github.io/react-native/docs/touchableopacity.html
Muhammad Hannan

onPressは非同期関数をコールバックとして使用できますか?公式ドキュメントにこれについての言及はありません。
ryanwebjackson

27

ビューをaでラップしてから、通常のTouchableWithoutFeedback方法onPressで友人を使用できます。またpointerEvents、子ビューで属性をオンに設定してブロックすることもできます。親のポインターイベントもブロックされます。TouchableWithoutFeedback興味深いことに、これはAndroidでの必要性でしたが、iOSではテストしていませんでした。

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

<TouchableWithoutFeedback onPressIn={this.closeDrawer}>
    <Animated.View style={[styles.drawerBackground, styleBackground]} pointerEvents={isOpen ? undefined : 'none'} />
</TouchableWithoutFeedback>

2
iOSでテストされ、正常に動作します。フィードバックなしの
タッチ可能なものとタッチ可能な

@habedを共有してくれてありがとう!DID pointerEventsNoneラッピング親の子ブロックプレスに?
Noitidart

6

これを実現するには、TouchableOpacity、TouchableHighlight、TouchableNativeFeedbackを使用できます。ビューコンポーネントは、小道具としてonPressを提供しません。そのため、代わりにこれらを使用します。

<TouchableNativeFeedback
        onPress={this._onPressButton}
</TouchableNativeFeedback>

OR

<TouchableHighlight onPress={this._onPressButton}>
</TouchableHighlight>

OR

<TouchableOpacity onPress={this._onPressButton}>
</TouchableOpacity>


2

または、次のようにビューにonStartShouldSetResponderを提供することもできます。

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.