"use strict"
import React, { Component } from ‘react‘;import { AppRegistry, // 注册组件,是应用的JS运行入口 StyleSheet, // 样式表, 类似于一个集合包含各个组件的属性 ScrollView, Dimensions, // 规格 Image, // 图片组件 View // 视图组件} from ‘react-native‘;
// 当前设备屏幕的sizeconst { 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/377017392.设置 key 的说明 ：在遍历或者循环输出去渲染子组件的时候，key必不可少
**************************************** 效果图 ****************************************
时间： 2024-08-24 02:33:44