web-dev-qa-db-ja.com

ネイティブに対応：View onPressが機能しない

私は奇妙な問題に直面しています。私の反応するネイティブアプリでは、onPressイベントをViewに設定した場合、それはトリガーされませんが、Text内で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を使用しています

react-nativereact-native-android
71
mehulmpt

TouchableOpacityイベントにはonPressを使用できます。 ViewはonPress propを提供しません。

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

ビューをTouchableWithoutFeedbackでラップしてから、onPressと通常どおりの友人を使用できます。また、子ビューで属性をonに設定することで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>
19
Noitidart

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

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

OR

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

OR

<TouchableOpacity onPress={this._onPressButton}>
</TouchableOpacity>
3
Naleen Dissanayake