08Image components of React Native from zero learning

In the development process, almost every project uses pictures.
RN displays pictures through Image components. You can either load network pictures or load local resource pictures. The
Image component must declare the amount and height of the image in the style. If there is no declaration, the image will not appear on the interface.

Network picture loading

Loading network pictures is very simple, directly on the code:
, modify index.ios.js or inde.android.js

Import React {Component} from {AppRegistry'react'; import, StyleSheet, View, Image} from'react-native'; VAR imageAddress ='http://qq.111cn.net/uploads/allimg/140712/22020H9C-22.jpg'; class AwesomeProject extends Component render (return () {{/ / < View style={styles.container}> View; < 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, heigh}, T:100}}; AppRegistry.registerComponent ('AwesomeProject', ()) => AwesomeProject);
08Image components of React Native from zero learning
results

Local picture loading

In RN development, you need to pre load the static picture resources, as follows, where you need to create a image folder in the project directory, where big_star.png is placed.

Class AwesomeProject extends Component render (return () {{/ / < View style={styles.container}> View; < 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 picture resource at the top of the code

Note that the following code is running wrong

Var imageAddress ='./image/big_star.png'; / / class AwesomeProject extends Component operation stage assignment {//require in the editing stage will deal with render () {return (View < View / root; style={styles.container}> < Image style={styles.imageStyle} source={require ({imageAddress})}/> < /View>}});

In RN development, need to specify a name pre loaded picture does not allow the use of string variables. Because the React Native handles all require statements in the code is compiled, not dynamically at runtime, and VaR in operation assignment, so cannot dynamically load images. Resources will report the following error:

08Image components of React Native from zero learning

ResizeMode

As we mentioned above, the Image component must declare the amount and height of the image in the style. If there is no declaration, the image will not appear on the interface.
we define Image width and height multiplied by the current operation of the pixel density environment called Image. When the actual width Image the actual width and height with the picture of the actual width and height of the discrepancies, and divided into three types of different values of resizeMode as the picture style definition, three values respectively. Contain, cover and stretch., the default value is cover.

  1. The cover mode simply fills the display area with no distortion in proportion. You can zoom in or out of the picture. The part beyond the display area does not show. That is to say, the picture may not be shown in part.
  2. Contain mode is required to display the entire picture, you can narrow it, the picture will show complete, may reveal the background of the Image control. If the width and height of the picture are less than the width of the control height, the image will not be enlarged.
  3. The stretch mode does not consider keeping the original width or height of the image. Filling the display area of the entire Image definition, the picture displayed by this pattern may be malformed and distorted.
  4. The center model, supported by version 0.33 in September 11th, supports geometric scaling on the basis of the contain model.

Look at the example, modify the code above, define three Image controls of the same size, introduce the same image, and specify a different resizeMode.

Class AwesomeProject extends Component (componentWillMount) {{/ / pre loading static resource this.image=require ('./image/meinv.jpg'); render (return)} ({/ / View View style={styles.container}> root < < Image; style={[styles.imageStyle {resizeMode:'cover'}]} source={this.image}/> < Image; style={[styles.imageStyle {resizeMode:'contain'}]} < Image, source={this.image}/> style={[styles.imageStyle, {resizeMode:'stretch'}]} source={this.image}/> < /View>); styles = StyleSheet.create (const}} {container: {/ / root View style Flex: 1, justifyContent:'center', alignItems:'center', backgroundColor:'grey'imageStyle:}, {width:150, height:150, margin:5, backgroundColor:'white'}});

See how it works:

08Image components of React Native from zero learning

ResizeMode can also be defined on attributes that are higher than the priority in style:

< Image, style={{height:200, width:200}}, resizeMode={Image.resizeMode.cover}, source={this.image}/>

See the above three modes can be found in native Image control cannot be achieved without loss of enlarged after the show, we need a custom zone we can refer to, my another article React Native enlarged picture is not lost

Other styles

Although the Image component does not inherit from the View component, it supports most style keys in View, but there are a few more of them

  1. TintColor is a proprietary property of the IOS platform, a color type that allows a non transparent pixel part of a picture to have a staining effect
  2. OverlayColor is the exclusive nature of the Android platform Android platform. The type of color in some special situation can not be achieved through the borderRadius corner effect, then the need to use the overlayColor property, will need to be part of the force rounded with a specified color filling, so as to realize the circular angle effect.

callback

Image also supports the onLayout callback function, and onLayout function similar to the
View module through the Image component when we load the network picture, you can set the onLoadStart, onLoadEnd, onLoad three attributes to the specified number of letter processing required in reading and reading began at the end of the onLoad. Only the successful read picture calls, and onLoadEnd both success and failure will call.

More interesting, please pay attention to WeChat public account likeDev, public account name: fall in love with Android.

08Image components of React Native from zero learning
likeDev.jpg