React Native Knowledge 4-Image components, react4-image

React Native Knowledge 4-Image components, react4-image

A React component used to display multiple types of images, including network images, static resources, temporary local images, and images (such as photo albums) on a local disk.

 

I. Attributes

1: onLayout function

Called when the element is mounted or the layout changes. The parameter is {nativeEvent: {layout: {x, y, width, height }}}.

2: onLoad function

Call this callback function when the load is successful.

3: onLoadEnd function

Call this callback function whether it is successful or failed after loading.

4: onLoadStart function

Called when loading starts.

5: resizeMode enum ('cover', 'containin', 'stretch ')

Determines how to adjust the image size when the component size and image size are out of proportion.

6: cover: scale the image while maintaining the image Aspect Ratio until the width and height are greater than or equal to the size of the container view (if the container has a padding liner, subtract it ). In this way, the image is completely overwritten or exceeds the container, and no blank space is left in the container.

7: contain: scale the image while maintaining the image Aspect Ratio until the width and height are smaller than or equal to the size of the container view (if the container has a padding liner, subtract it ). In this way, the image is completely enclosed in the container, and there may be blank space in the container.

8: stretch the image and do not maintain the aspect ratio until the width and height are filled with containers.

9: source {uri: string}, number

Uri is a string that represents the resource ID of an image. It can be an http address or a local file path (referenced using require (relative path ).

10: testID string

A unique resource identifier used to identify this element in an automatic test script.

11 :( ios) accessibilityLabel string

When a user interacts with an image, the reader (Accessibility function) reads the text.

12: (ios) accessible bool

When this attribute is true, it indicates that the image is an element with accessibility enabled.

13 :( ios) blurRadius number

BlurRadius: adds a blur filter with a specified radius to the image.

14 :( ios) capInsets {top: number, left: number, bottom: number, right: number}

When the image is scaled, the size of the corner specified by capInsets is fixed without scaling, and the middle and other parts on the edge are stretched. This is useful when creating variable-size rounded corner buttons, shadows, and other resources. For more information, see the official documentation of apple.

15 :( ios) defaultSource {uri: string}

A static image is displayed when the final image is being downloaded ).

16 :( ios) onError function

Call this callback function when loading errors. The parameter is {nativeEvent: {error }}

17 :( ios) onProgress function

Call continuously during loading. The parameter is {nativeEvent: {loaded, total }}

 

Ii. Attributes

1: FlexBox supports elastic box style

2: Transforms supports property animation.

3: resizeMode

4: backgroundColor background color

5: borderColor border color

6: borderWidth Border Width

7: borderRadius border rounded corner

8: overflow allows you to set the image size to be greater than the container size. You can set the image size to display or hide the image size ')

9: tintColor color settings

10: opacity sets opacity 0.0 (transparent)-1.0 (completely opaque)

11: alignSelf: center indicates center in the current layout

12: flexDirection: row. This attribute indicates horizontal layout.

 

Iii. Method

1: static getSize (uri: string, success: (width: number, height: number) => void, failure: (error: any) => void)

Obtain the width and height (in pixels) of the image before it is displayed ). This method also fails if the image address is incorrect or the download fails.

To obtain the image size, you must first load or download the image (it will be cached at the same time ). This means that theoretically you can use this method to pre-load images. Although this method is not optimized for this usage, in addition, in the future, we may change some implementation schemes so that you do not need to download the full image to obtain the size. Therefore, a better pre-loading solution is to use the special pre-loading method below.

 

2: static prefetch (url: string )#

Preload a remote image (download it to the local disk cache ).

 

Iii. instance code

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  TextInput,  Alert,  Image} from 'react-native';class ReactNativeProject extends Component {  render() {    return (      <View style={styles.container}>          <Image style={styles.imageTopStyle} source={{uri:"http://f1.diyitui.com/18/ac/88/89/c4/1b/ed/86/be/1c/46/62/79/1e/85/f1.jpg"}}/>          <Image style={styles.imageCenterStyle} source={require('./img/myimage.png')}/>          <Image style={styles.imageCenterStyle} source={require('image!myicon')}/>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    marginTop:64  },  imageTopStyle:{    marginTop:20,    marginRight:20,    marginLeft:20,    height:100,    width:100,    resizeMode:'cover'  },  imageCenterStyle:  {    marginRight:10,    marginTop:20,    height:50,    width:50  }});AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

:

Note: The above three methods correspond to three types of images, the first is to load the network diagram, the second is to load the project file, and the third is to load the image in the iOS project;

The above is the image in the loaded project. If you add this image to the virtual machine, remember to restart the terminal service. Otherwise, an error is reported;

The above is an image for loading xcassets in Xcode. It will take effect if you re-run XCode;