React-Native, wie man ein Bild hinzufügt und in Touchable drückt

Ich habe berührbar in Reaktion native, innen berührbar habe ich Bild und auf der Presse so

 <TouchableHighlight >
  <Image style={styles.imagestyle}
  source={require('./ic_action_name.png')} />
  onPress={() => this.moveToAddNewCustomer()}>
 </TouchableHighlight>

Als ich versuchte, die App auszuführen, bekam ich diesen Fehler

Es wird erwartet, dass React.Childeren.only ein einzelnes untergeordnetes Element des React-Elements erhält

Wie kann man das beheben?

Du musst es so machen:

<TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableHighlight>

oder

<TouchableOpacity onPress={()=>this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableOpacity>

Standardmäßig gibt es keine Klicks oder Ereignisse, die mit einer der Ansichten in React Native wie React.js verbunden sind. Es gibt hauptsächlich zwei Ansichten, die speziell für die Handhabung von Berührungsereignissen entwickelt wurden. Sie sind TouchableOpacity Und TouchableHighlight. Sie können Ihr Problem lösen, indem Sie Ihre Image Komponente mit TouchableOpacity oder TouchableHighlight.

<TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableHighlight>

https://reactnative.dev/docs/touchablehighlight

https://reactnative.dev/docs/touchableopacity

Wenn

TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableHighlight>

hat nicht funktioniert, Sie sollten Ihr Bild in a einfügen <view>

Ich habe mein Problem mit “TouchableWithoutFeedback” gelöst.

<TouchableWithoutFeedback
    onPress={() => {
       this.moveToAddNewCustomer()}
    }}
>
    <Image
      style={styles.newImage}
      // resizeMode="contain"
      source={require("~/assets/images/test123.png")}
    />
</TouchableWithoutFeedback>

Wenn

TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
<Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableHighlight>

hat nicht funktioniert oder sogar das Bild mit der Ansicht umbrochen, dann empfehle ich Ihnen, in Ihrem nachzuschlagen

style={styles.imagestyle}

versuchen zu benutzen zIndex: 10
Es besteht eine geringe Chance, dass Ihr Bild von etwas überlagert wurde, aber das Bild geht nicht verloren.