React Native ScrollView 添加图片数组

Posted 2020-08-12 马大哈哈

"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必不可少

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