123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- /**
- * 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 VocabularyTextView 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 itemTitles = [{text: '单词', noun: 'dān cí '},
- {text: '单词', noun: 'dān cí '},
- {text: '单词', noun: 'dān cí '},
- {text: '单词', noun: 'dān cí '}]
- 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 < itemTitles.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 style={styles.ItemBgView} onPress={() => {
- this.props.didSelectedItem(i)
- this.setState({selectedIndex: i})
- }} key = {i} >
- <Image source={imageSource} style={styles.ImageView} />
- <Text style={styles.Text}>{itemTitles[i].text}</Text>
- <Text style={styles.Text}>{itemTitles[i].noun}</Text>
- </TouchableOpacity>
- )
-
- items.push(item)
- }
-
- return items
- }
- render() {
- return (
- <View style={styles.View}>
- {this.renderItems()}
- </View>
- );
- }
- }
-
- const styles = StyleSheet.create({
- View: {
- width: ScreenDimensions.width,
- height: 208,
- justifyContent: 'space-between',
- alignItems: 'center'
- },
- ItemBgView: {
- flexDirection: 'row',
- alignItems: 'center',
- },
- ImageView: {
- width: 22,
- height: 22,
- },
- Text: {
- fontSize: 16,
- marginLeft: 8,
- color: '#333333'
- }
- })
|