campus_react_local/App/views/community/PicAndTextViewController/PicAndTextImageSwiperViewCo...

/**
 * Created by zack on 2018/5/22.
 */
import {
	View,
	Text,
	StyleSheet,
	Platform,
	ScrollView,
	Image,
	TouchableOpacity
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import ImageLoader from 'react-native-smart-image-loader'
import {CachedImage} from 'react-native-img-cache'

export default class PicAndTextImageSwiperViewController extends Component {
	constructor(props) {
		super(props)
		this.state = {
			imageUrls: props.imageUrls,
			currentPage: 0
		}
	}
	

	onAnimationEnd(e){
		// 求出水平方向上的偏移量
		const offSetX = e.nativeEvent.contentOffset.x
		// 计算当前页码
		const currentPage = offSetX / (ScreenDimensions.width)
		// 重新绘制UI
		this.setState({currentPage: currentPage})
	}

	renderImageListViews() {
		let imageViews = []

		for (let i = 0; i < this.state.imageUrls.length; i ++) {
			const imageUrl = this.state.imageUrls[i]

			let imageView = (
				<CachedImage key= {i} source={{uri: imageUrl}} style={styles.ImageView} resizeMode={'contain'}/>
			)

			imageViews.push(imageView)
		}

		return imageViews
	}

	render() {
		return(
			<View style={styles.View}>
				<ScrollView onMomentumScrollEnd={(e) => this.onAnimationEnd(e)} style= {styles.View} pagingEnabled={true} horizontal={true}>
					{this.renderImageListViews()}
				</ScrollView>

				<TouchableOpacity onPress={() => {
					this.props.navigator.pop()
				}} style= {styles.BackButton}>
					<Image source={require('../../../resources/images/left.png')}/>
				</TouchableOpacity>

				<Text style={styles.ProgressText}>{this.state.currentPage + '/' + this.state.imageUrls.length}</Text>

				<TouchableOpacity style = {styles.SaveButton}>
					<Text style = {styles.SaveButtonText}>{'保存'}</Text>
				</TouchableOpacity>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: '#000000',
	},
	ImageView: {
		marginTop: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - 50,
		// backgroundColor: '#000000'
	},
	BackButton: {
		position: 'absolute',
		left: 12,
		top: 28,
		width: 30,
		height: 30,
		justifyContent: 'center',
		alignItems: 'center',
	},
	ProgressText: {
		fontSize: 15,
		color: '#ffffff',
		left: 22,
		position: 'absolute',
		bottom: 44,
	},
	SaveButton: {
		right: 22,
		position: 'absolute',
		bottom: 44,
	},
	SaveButtonText: {
		fontSize: 15,
		color: '#ffffff'
	}
})