08Image components from the zero-learning react native

In the development process, images are used in almost every project.
RN is the display of pictures through the image component. You can load a network picture or load a local resource picture.
The image component must declare the paragraph and height of the picture in the style. If there is no declaration, the picture will not be rendered on the interface.

Web Image loading

Loading network pictures is very simple, directly on the code:
Modify Index.ios.js or Inde.android.js

import React, {Component} from ‘react’;
import {
    AppRegistry,
    StyleSheet,
    View,
    Image
} from ‘react-native’;

var imageAddress = ‘http://qq.111cn.net/uploads/allimg/140712/22020H9C-22.jpg’;
class AwesomeProject extends Component {
    render () {
        return (
            // Root View
            <View style = {styles.container}>
                <Image style = {styles.imageStyle}
                       source = {{uri: imageAddress}} />
            </ View>
        );
    }
}
const styles = StyleSheet.create ({
    container: {// Root View style
        flex: 1,
        justifyContent: ‘center’,
        alignItems: ‘center’,
        backgroundColor: ‘# F5FCFF’
    },
    imageStyle: {
        width: 100,
        height: 100
    }
});

AppRegistry.registerComponent (‘AwesomeProject’, () => AwesomeProject);
operation result:
Local image loading
In RN development, static image resources need to be loaded in advance, as follows, in which the image folder needs to be created under the project directory, where big_star.png is placed.

class AwesomeProject extends Component {
    render () {
        return (
            // Root View
            <View style = {styles.container}>
                <Image style = {styles.imageStyle}
                       source = {require (‘./ image / big_star.png‘)} />
            </ View>
        );
    }
}
require is equivalent to using var to declare a variable, which is equivalent to preloading the image resource at the top of the code.

Note that the following code will report an error when running

var imageAddress = ‘./image/big_star.png’; // Assignment during operation
class AwesomeProject extends Component {
    // require will be processed in the editing stage
    render () {
        return (
            // Root View
            <View style = {styles.container}>
                <Image style = {styles.imageStyle}
                       source = {require ({imageAddress})} />
            </ View>
        );
    }
}
In RN development, it is not allowed to use string variables to specify the name of the image that needs to be preloaded. Because React Native handles all require declarations when compiling code, it is not dynamically processed at runtime, but var is assigned at runtime , So the picture resource cannot be loaded dynamically. The following error will be reported:

resizeMode
As we said above, the Image component must declare the style and height of the picture in the style. If there is no statement, the picture will not be presented on the interface.
We generally multiply the width and height defined by Image by the pixel density of the current operating environment as the actual width and height of Image. The value is divided into three cases, the three values are: contain, cover and stretch. The default value is cover.

The cover mode only seeks to fill the entire display area without distorting the display scale. You can zoom in or zoom out the image, and the part beyond the display area will not be displayed, that is to say, the part of the image may not be displayed.
The contain mode requires the entire image to be displayed, which can be scaled down proportionally. The image will be displayed in its entirety, and the background color of the Image control may be exposed. If the picture width and height are smaller than the control width and height, the picture will not be enlarged.
The stretch mode does not consider keeping the original width and height ratio of the picture. Filling the entire display area defined by the Image, the picture displayed by this mode may be deformed and distorted.
Let's look at an example. Modify the above code to define three Image controls of the same size. Introduce the same picture and specify different resizeMode.

class AwesomeProject extends Component {
    componentWillMount () {
        // Preload static resources
        this.image = require (‘./ image / meinv.jpg’);
    }
    render () {
        return (
            // Root View
            <View style = {styles.container}>
                <Image style = {[styles.imageStyle, {resizeMode: ‘cover‘}]}
                       source = {this.image} />
                <Image style = {[styles.imageStyle, {resizeMode: ‘contain‘}]}
                       source = {this.image} />
                <Image style = {[styles.imageStyle, {resizeMode: ‘stretch‘}]}
                       source = {this.image} />
            </ View>
        );
    }
}

const styles = StyleSheet.create ({
    container: {// Root View style
        flex: 1,
        justifyContent: ‘center’,
        alignItems: ‘center’,
        backgroundColor: ‘grey’
    },
    imageStyle: {
        width: 150,
        height: 150,
        margin: 5,
        backgroundColor: ‘white’
    }
});
See the running effect:

Other styles
Although the Image component does not inherit from the View component, it supports most of the style keys in View, in addition to these there are some additional.
1.tintColor is a proprietary attribute of the IOS platform, and the color type can make the non-transparent pixels in the picture have a stained effect.
2. OverlayColor is a proprietary property and color type of the Android platform. In some special cases, the Android platform cannot achieve the rounded corner effect through borderRadius. In this case, the overlayColor property needs to be used. Forcibly, the rounded corners will be filled with the specified color, thus Realize the rounded corner effect.

Callback
Image also supports onLayout callback function, similar to onLayout function of View component
When we load the network image through the Image component, we can set onLoadStart, onLoadEnd, onLoad three properties to specify the function processing that needs to be performed at the beginning of reading and the end of reading.OnLoad only successfully reads the image call, and onLoadEnd regardless of success Both fail and call.

For more exciting, please pay attention to the public account likeDev, public account name: fall in love with Android.
Learn the 08Image component of React Native from scratch