React Native ScrollView 添加图片数组

"use strict"

import React, { Component } from 'react';
import {
    AppRegistry, // 注册组件,是应用的JS运行入口
    StyleSheet,  // 样式表, 类似于一个集合包含各个组件的属性
    ScrollView,
    Dimensions,  // 规格
    Image,       // 图片组件
    View         // 视图组件
} from 'react-native';

// 当前设备屏幕的size
const { width, height } = Dimensions.get('window')

// 图片
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')

];

// 声明一个 Helloworld 组件
class HelloWorld extends Component {


/* 参考 ：http://www.cnblogs.com/huanglifen/p/5175082.html
    *  请注意这个函数，返回的Image 必须要有 key 
    *  如果 没有key，会报警告⚠️ ------ each child in an array or iterator should have a unique ”key”  props （具体看备注）
    *  在scrollview中使用map函数，循环创建。
    * */
    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'}/>

            {IMAGES.map((key, i) => this.renderImages(key, i))}
        </ScrollView>
    );
  }
}

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);


备注：
1.参考：http://www.cnblogs.com/huanglifen/p/5175082.html   +    http://www.zhihu.com/question/37701739
2.设置 key 的说明  ：在遍历或者循环输出去渲染子组件的时候，key必不可少

**************************************** 效果图 ****************************************