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'}/>

    }

    render() { // 渲染

      return (

/*
          * 设置空间高度：
           －1:直接对ScrollView设置高度
           －2:对该ScrollView的父控件设置相关高度<注意:是 父组件 需要添加style={{flex:1}]>
           -3:scrollview本身不能设置 flex: 1

           以下代码实现水平方向滑动,若改为垂直方向 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);


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

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

转载于:https://www.cnblogs.com/madaha/p/5932323.html