campus_react_local/App/views/learn/View/VocabularyImageView.js

/**
 * Created by zack on 2018/4/27.
 */
import {
	View,
	Text,
	StyleSheet,
	TouchableOpacity,
	Platform,
	Image,
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'

export default class VocabularyImageView extends Component {
	constructor(props) {
		super(props)
		this.state = {
			selectedIndex: -1,
			correctIndex: props.correctIndex,
			isVerified: props.isVerified
		}
	}

	componentWillReceiveProps(props) {
		this.setState({
			correctIndex: props.correctIndex,
			isVerified: props.isVerified
		})
	}

	renderItems() {
		let titles = ["dog", 'cat', 'sun', 'moon']
		let items = []

		let deselectImageSource = require('../../../resources/images/TabBar/Learn/btn_normal.png')
		let selectImageSource = require('../../../resources/images/TabBar/Learn/btn_seleted.png')
		let selectCorrectedImageSource = require('../../../resources/images/TabBar/Learn/btn_correct.png')

		for(let i = 0 ; i < titles.length; i ++) {
			let imageSource = null

			if (!this.state.isVerified) { //还没有进行验证
				if (i === this.state.selectedIndex) {
					imageSource = selectCorrectedImageSource
				}else {
					imageSource = deselectImageSource
				}
			}else { //已经验证了
				if (this.state.selectedIndex === this.state.correctIndex) { // 答对了
					if (i === this.state.selectedIndex) {
						imageSource = selectCorrectedImageSource
					}else {
						imageSource = deselectImageSource
					}
				}else { //回答错误了
					if (i === this.state.selectedIndex) {
						imageSource = selectImageSource
					}else if (i === this.state.correctIndex) {
						imageSource = selectCorrectedImageSource
					}else {
						imageSource = deselectImageSource
					}
				}
			}

			let item = (
				<TouchableOpacity onPress={() => {
					this.props.didSelectedItem(i)
					this.setState({selectedIndex: i})
				}} key={i} style={[styles.ItemBgView, {marginLeft: i%2 === 0 ? 23: 14, marginTop: i < 2 ? 0 : 14 }]}>
					<Image style={styles.ImageView} source={require("../../../resources/images/TabBar/Learn/pic_03_dog.png")}/>

					<View style={styles.TitleBgView}>
						<Image style={styles.SelectedImageView} source={imageSource}/>
						<Text style={styles.Title}>
							{'dog'}
						</Text>
					</View>
				</TouchableOpacity>
			)
			items.push(item)
		}

		return items
	}
	render() {
		return(
			<View style={styles.View}>
				{this.renderItems()}
			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		marginTop: 20,
		flexWrap: 'wrap',
		flexDirection: 'row'
	},
	ItemBgView: {
		width: (ScreenDimensions.width - 23 - 23 - 14)/2.0,
		//height: (ScreenDimensions.width - 23 - 23 - 14)/2.0*165/150.0,
		borderRadius: 8,
		borderColor: '#d2d2d2',
		borderWidth: 1,
		justifyContent: 'space-between',
	},
	ImageView: {
		width: (ScreenDimensions.width - 23 - 23 - 14)/2.0 - 30,
		height:(ScreenDimensions.width - 23 - 23 - 14)/2.0 - 30,
		marginLeft: 15,
		marginTop: 15,
	},
	TitleBgView: {
		width: (ScreenDimensions.width - 23 - 23 - 14)/2.0 - 30,
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 17,
		marginBottom: 11,
	},
	SelectedImageView: {
		width: 22,
		height: 22,
		marginLeft: 7,
	},
	Title: {
		fontSize: 16,
		color: '#333333',
		marginLeft: 11,
	}
})