React Native ScrollView Adding a picture array

"Use Strict"

Import React, {Component} from ' React ';
Import {
Appregistry,//Register component, is the application of JS run the portal
StyleSheet,//style sheet, similar to a collection containing properties of individual components
ScrollView,
Dimensions,//specifications
Image,//Picture component
View//Views Components
} from ' react-native ';

Size of the current device screen
const {width, height} = dimensions.get (' window ')

Image
var IMAGES = [
Require ('./resource/test/1.png '),
Require ('./resource/test/2.jpeg '),
Require ('./resource/test/3.png '),
Require ('./resource/test/1.png '),
Require ('./resource/test/2.jpeg '),
Require ('./resource/test/3.png '),
Require ('./resource/test/1.png '),
Require ('./resource/test/2.jpeg '),
Require ('./resource/test/3.png ')

];

Declaring a Helloworld component
Class HelloWorld extends Component {


    /* Reference: http://www.cnblogs.com/huanglifen/p/5175082.html
* Please note this function, the returned image must have a key
* If there is no key, the warning will be reported?? ------Each child in an  array or iterator should has a unique "key" props (see note)
 * Use the map function in ScrollView to create loops. 
    * */
renderimages (key, i) {

        Key:1, 2, 3, 4, 5 ...
        I:   0, 1, 2, 3, 4 ...
        Return <image Key={i} style={{flex:1, width, height}} Source={images[key]} resizemode={' contain '}/>

    }

Render () {//Render

Return (

          /*
* Set space height:
-1: Set the height directly to the ScrollView
-2: Settings related to the parent control of the ScrollView height < note: The parent component needs to be added style={{flex:1}>
The -3:scrollview itself cannot be set flex:1

The following code slides horizontally, if the vertical direction is flexdirection: ' column ' + horizontal={false}
           * */
<scrollview contentcontainerstyle={{flexdirection: ' Row '}}
Showshorizontalscrollindicator={true}
Horizontal={true}
Pagingenabled={true}
>
{images.map (key, i) = = This.renderimages (key, i)}
</ScrollView>
);
}
}

Appregistry.registercomponent (' HelloWorld ', () = HelloWorld);


Note:
1. Reference: http://www.cnblogs.com/huanglifen/p/5175082.html   +    http://www.zhihu.com/question/37701739
2. Set key description  : Key is necessary when traversing or looping the output to render sub-components

****************************************  ****************************************

React Native ScrollView Adding a picture array