Native reagieren: View onPress funktioniert nicht

104

Ich stehe vor einem seltsamen Problem. Wenn ich in meiner reaktiven nativen App ein onPressEreignis auf " ViewEs" gesetzt habe , wird es nicht ausgelöst, aber wenn ich dasselbe auf " TextInnen" setze , wird es ausgelöst View. Was fehlt mir hier?

<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>

Warum ist das so? Ist dies ein Problem mit React Native? Ich benutze Version 0.43

mehulmpt
quelle

Antworten:

175

Sie können TouchableOpacityfür onPressEreignis verwenden. Viewbietet keine onPressStütze.

<TouchableOpacity style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</TouchableOpacity>
Ahsan Ali
quelle
4
Die vollständige Referenzdokumentation finden Sie hier: facebook.github.io/react-native/docs/touchableopacity.html
Muhammad Hannan
Kann onPress mit einer asynchronen Funktion als Rückruf arbeiten? Ich sehe keine Erwähnung in der offiziellen Dokumentation.
Ryanwebjackson
27

Sie können die Ansicht mit einem umschließen TouchableWithoutFeedbackund dann onPressund Freunde wie gewohnt verwenden. Sie können auch weiterhin blockieren, pointerEventsindem Sie das Attribut in der untergeordneten Ansicht aktivieren. Es blockiert sogar Zeigerereignisse auf der übergeordneten Ansicht. Es ist TouchableWithoutFeedbackinteressant. Dies war meine Notwendigkeit für Android. Ich habe es nicht für iOS getestet:

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

<TouchableWithoutFeedback onPressIn={this.closeDrawer}>
    <Animated.View style={[styles.drawerBackground, styleBackground]} pointerEvents={isOpen ? undefined : 'none'} />
</TouchableWithoutFeedback>
Noitidart
quelle
2
Getestet auf iOS und es funktioniert einwandfrei. Beide mit berührbarem ohne Feedback und berührbarem Highlight
gewohnt am
Danke, dass du @habed geteilt hast! Hat der pointerEventsNoneauf dem Kind befindliche Block auf das umbrechende Elternteil gedrückt?
Noitidart
6

Sie können TouchableOpacity, TouchableHighlight, TouchableNativeFeedback verwenden, um dies zu erreichen. Die Ansichtskomponente bietet onPress nicht als Requisiten. Also verwenden Sie diese stattdessen.

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

OR

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

OR

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

Naleen Dissanayake
quelle
2

Alternativ können Sie Ihrer Ansicht auch onStartShouldSetResponder bereitstellen, wie folgt:

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>
Sydney C.
quelle