This is the 11th day of my participation in the August Wenwen Challenge.More challenges in August

preface

“The colors of August are made of gold, bright and precious; The colors of August are brewed with the sun, fragrant and brilliant.”

In the future, I wish you to adjust yourself to the best state, slowly work hard, slowly become better

In RN, we sometimes need to add click events to the Image component, but the Image itself is not supported, so we often use it

TouchableWithoutFeedback TouchableOpacity TouchableHighlight

Include the Image component below and add the onPress event to it.

TouchableOpacity

This component is used to encapsulate views so that they properly respond to touch operations. When pressed, the opacity of the encapsulated view is reduced.

Opacity changes are achieved by encapsulating child elements in an Animated View that is added to the View hierarchy and, in rare cases, may affect the layout.

This component differs from TouchableHighlight in that there are no additional color changes, making it more suitable for general scenes.

The official sample

renderButton: function() {
  return (
    <TouchableOpacity onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('./myButton.png')}
      />
    </TouchableOpacity>
  );
},
Copy the code

TouchableWithoutFeedback

Don’t use this component unless you have a good reason. All elements that respond to touch screen action should have a visual feedback after touch (this component doesn’t have any visual feedback), which is one of the main reasons why a “Web” application is often not “native” enough.

Note:

TouchableWithoutFeedback supports only one child node (cannot have no children or more than one). If you want to contain multiple child components, you can wrap them in a View.

Common usage scenarios such as clicking on a blank space to trigger an action can be covered with TouchableWithoutFeedback or absolute positioning.

The official sample

TouchableHighlight

This component is used to encapsulate views so that they properly respond to touch operations. When pressed, the opacity of the encapsulated view is reduced and an underlying color is visible to the user, darkening or lightening the view.

At the bottom of the implementation, a new view is actually created into the view hierarchy, which can sometimes lead to unwanted visuals if not used correctly. For example, the view’s backgroundColor is not explicitly declared an opaque color.

Note:

TouchableHighlight supports only one child node (cannot have no or more than one child node). If you want to contain multiple child components, you can wrap them in a View.

The official sample

conclusion

If this article helped you, please like 👍 and follow ⭐️

If there are any errors in this article, please correct them in the comments section 🙏🙏.