campus_react_local/App/views/learn/LearnViewController.js

/**
 * Created by zack on 2018/4/19.
 */
import {
	View,
	Text,
	StyleSheet,
	Image,
	TouchableOpacity
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../utils/DimensionsTools'
import VocabularyTextView from './View/VocabularyTextView'
import VocabularyImageView from './View/VocabularyImageView'
import ListenAndFillSingleWordView from './View/ListenAndFillSingleWordView'
import ListenAndFillMultiWordView from './View/ListenAndFillMultiWordView'
import TranslationView from './View/TranslationView'
import ToastMsg from '../../utils/ToastMsg'
import LearnViewControllerNavigationBar from '../base/LearnViewControllerNavigationBar'
import {GlobalUserStorageTool, UserStorageKey} from '../../utils/GlobalUserStorageTool'
import BaseNavigationBarStyle from '../base/BaseNavigationBarStyle'

export default class LearnViewController extends Component {
	static navigatorButtons = {
		rightButtons: [
			{
				icon: require('../../resources/images/BaseNavigationBar/icon-mine.png'), // for icon button, provide the local image asset name
				id: 'mine' //Android has four type of left button,you sure specify the button type.
			},
		],
		leftButtons: [
			{
				title: 'Edit',
				id: 'edit',
				disableIconTint: true,
				buttonFontSize: 14,
			},
		]

	};
	constructor(props) {
		super(props)
		this.state = {
			navigationBarMenu: [
				{title: '单词', index: 0},
				{title: '短语', index: 1},
				{title: '句子', index: 2},
				{title: '语法', index: 3},
				{title: '听说', index: 4},
				{title: '读写', index: 5},
			],
			questionList: [{type: 'Text'},{type: 'Image'},{type: 'SingleWord'},{type: 'MultiWord'},{type: 'Translation'},],
			questionSelectedIndex: 0,
			isVerified: false,
			currentQuestionType: 'Text',
			answerSelectedIndex: -1, //
			answerCorrectIndex: -1,
		}
	}

	componentDidMount() {
		this.props.navigator.setOnNavigatorEvent(event => {
			if (event.type === 'NavBarButtonPress') {
				if (event.id === 'mine') {
					this.goToMinePage()
				}else if (event.id === 'edit') {
					this.goToEditUserLearnLevelPage()
				}
			}else if (event.type === 'ScreenChangedEvent') {
				if (event.id === 'willAppear') {
					this.showTabBar()
				}else if (event.id === 'willDisappear') {

				}
			}
		})
	}

	goToEditUserLearnLevelPage() {
		this.hideTabBar()
		this.props.navigator.showModal({
			screen: 'LearnLevelViewController',
			title: '',
			backButtonTitle: '',
			passProps: {
				isPush: true
			},
			navigatorStyle: {
				statusBarTextColorScheme: 'light',
				statusBarColor: '#0281c5',
				navBarHidden: true
			}
		})
	}

	goToMinePage() {
		this.hideTabBar()
		GlobalUserStorageTool.load(UserStorageKey.UserInfo, (response) => {
			if (response && response.nickname) { //已经登录成功
				this.props.navigator.push({
					screen: 'MineViewController',
					title: '基本资料',
					backButtonTitle: '',
					navigatorStyle: BaseNavigationBarStyle,
					passProps: {
						UserInfo: response
					}
				})
			} else {
				this.props.navigator.push({
					screen: 'LoginViewController',
					title: '我的',
					backButtonTitle: '',
					navigatorStyle: {
						navBarHidden: true
					},
					passProps: {

					}
				})
			}
		}, (error) => {
			this.props.navigator.push({
				screen: 'LoginByVerificationCodeViewController',
				title: '我的',
				backButtonTitle: '',
				navigatorStyle: {
					navBarHidden: true
				},
				passProps: {

				}
			})
		})
	}

	hideTabBar() {
		this.props.navigator.toggleTabs({
			to:'hidden',
			animated: true
		})
	}

	showTabBar() {
		this.props.navigator.toggleTabs({
			to:'shown',
			animated: true
		})
	}

	nextQuestion() {
		if (this.state.questionSelectedIndex === this.state.questionList.length - 1) {
			alert("完成")
			return;
		}

		this.setState({questionSelectedIndex: this.state.questionSelectedIndex + 1, isVerified: false, answerSelectedIndex: -1, answerCorrectIndex: -1})
	}

	verifyAnswer() {
		let contentViewType = this.state.questionList[this.state.questionSelectedIndex].type

		if (contentViewType === 'Text') {
			if (this.state.answerSelectedIndex === -1) {
				alert("请选择你的答案")
				return
			}
			//从课后答案中设置正确的答案
			this.setState({isVerified: true, answerCorrectIndex: 2})
		}else if (contentViewType === 'Image') {
			if (this.state.answerSelectedIndex === -1) {
				ToastMsg.show("请选择你的答案")
				return
			}
			//从课后答案中设置正确的答案
			this.setState({isVerified: true, answerCorrectIndex: 2})
		}else if (contentViewType === 'SingleWord') {
			this.setState({isVerified: true})
		}else if (contentViewType === 'MultiWord') {
			this.setState({isVerified: true})
		}else if (contentViewType === 'Translation') {
			this.setState({isVerified: true})
		}
	}

	lastQuestion() {
		if (this.state.questionSelectedIndex === 0) {
			ToastMsg.show("当前已经是第一题了！")
			return;
		}

		this.setState({questionSelectedIndex: this.state.questionSelectedIndex - 1}	)
	}

	renderVocabularyView() {
		let contentViewType = this.state.questionList[this.state.questionSelectedIndex].type

		if (contentViewType === 'Text' || contentViewType === 'Image') {
			return(
				<TouchableOpacity style={styles.VoiceTitleBgView}>
					<Image style={styles.VoiceImageView} source={require("../../resources/images/TabBar/Learn/btn_speaker.png")}/>
					<Text style={styles.VocabularyText}>{'Speech'}</Text>
					<Text style={styles.NounText}>{'[spiːtʃ]'}</Text>
				</TouchableOpacity>
			)
		}else {
			return(
				null
			)
		}
	}

	renderCenterContentView() {
		let contentViewType = this.state.questionList[this.state.questionSelectedIndex].type

		if (contentViewType === 'Text') {
			return (
				<VocabularyTextView
					correctIndex = {this.state.answerCorrectIndex}
					isVerified= {this.state.isVerified}
					didSelectedItem = {(index) => {
						this.setState({answerSelectedIndex: index})
					}}
				/>
			)
		}else if (contentViewType === 'Image') {
			return (
				<VocabularyImageView
					correctIndex = {this.state.answerCorrectIndex}
					isVerified= {this.state.isVerified}
					didSelectedItem = {(index) => {
						this.setState({answerSelectedIndex: index})
					}}
				/>
			)
		}else if (contentViewType === 'SingleWord') {
			return (
				<ListenAndFillSingleWordView
					isVerified= {this.state.isVerified}
				/>
			)
		}else if (contentViewType === 'MultiWord') {
			return (
				<ListenAndFillMultiWordView
					isVerified= {this.state.isVerified}
				/>
			)
		}else if (contentViewType === 'Translation') {
			return (
				<TranslationView />
			)
		}
	}

	render() {
		return (
			<View style={styles.View}>
				<LearnViewControllerNavigationBar
					title = {"单词22"}
					subTitle = {"1/6"}
					leftTitle = {"初级"}
					didClickedMineItem = {() => {
						this.goToMinePage()
					}}
					didClickLeftButton = {() => {
						this.goToEditUserLearnLevelPage()
					}}
				/>
				{this.renderVocabularyView(true)}

				{this.renderCenterContentView()}

				<View style={styles.BottomButtonView}>
					<TouchableOpacity onPress={() => {
						this.lastQuestion()
					}} style={styles.LastQuestionButton}>
						<Text style={[styles.BottomButtonText, {color: '#666666',}]}>{'上一题'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						if (!this.state.isVerified) { //还没有验证答案，先进行答案验证请求
							//模拟验证
							this.verifyAnswer()
						}else { //验证成功之后，就允许用户点击下一题
							this.nextQuestion()
						}
					}} style={[styles.VerifyButton, {backgroundColor: this.state.isVerified === false ? '#e5e5e5' : '#71c135'}]}>
						<Text style={[styles.BottomButtonText, {color: '#ffffff'}]}>{this.state.isVerified === false ? '检查' : '下一题'}</Text>
					</TouchableOpacity>
				</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: '#ffffff',
		justifyContent: 'space-between',
	},
	VoiceTitleBgView: {
		height: 30,
		marginLeft: 15,
		marginTop: 15 + NavigationBarHeight.height,
		flexDirection: 'row',
		alignItems: 'center'
	},
	VoiceImageView: {
		width: 30,
		height: 30,
		backgroundColor: 'white'
	},
	VocabularyText: {
		fontSize: 18,
		color: '#333333',
		marginLeft: 8,
	},
	NounText: {
		fontSize: 18,
		color: '#333333',
		marginLeft: 8,
	},
	BottomButtonView: {
		marginLeft: 0,
		marginBottom: TabBarHeight.height + 18,
		height: 48,
		width: ScreenDimensions.width,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		backgroundColor: 'rgba(0,0,0,0)'
	},
	LastQuestionButton: {
		marginLeft: 15,
		height: 48,
		width: 100,
		borderRadius: 24,
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#e5e5e5',
	},
	VerifyButton: {
		marginRight: 15,
		height: 48,
		width: ScreenDimensions.width - 40 - 100,
		borderRadius: 24,
		alignItems: 'center',
		justifyContent: 'center',
	},
	BottomButtonText: {
		fontSize: 18,
	},

})