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

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

export default class TranslationView extends Component {
	constructor(props) {
		super(props)
		this.state = {
			evaluationSelectedIndex: 0,
			isVerified: props.isVerified,
			isShowAnswer: false
		}
	}

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

	renderAnswer(isShow) {
		if (isShow) {
			return(
			<View style={{borderBottomRightRadius: 6, borderBottomLeftRadius: 6}}>
				<Text style={styles.AnswerText}>{"Picasso once said this, he said that all children are born artists. The problem is to remain an artist as we grow up. "}</Text>
			</View>

			)
		}else {
			return(
				<TouchableOpacity onPress={() => {
					this.setState({isShowAnswer: true})
				}}>
					<Text style={styles.AnswerButtonText}>{'点击查看答案'}</Text>
				</TouchableOpacity>
			)
		}
	}
	render() {
		return(
			<ScrollView style= {styles.View}>
				<View style={styles.ContainerView}>
					<View style={styles.TitleTextBgView}>
						<TouchableOpacity style = {styles.VoiceIconButton}>
							<Image style={styles.VoiceImageView} source={require('../../../resources/images/TabBar/Learn/btn_speaker.png')}/>
						</TouchableOpacity>
						<Text style={styles.TitleText}>{"Picasso once said this, he said that all children are born artists. The problem is to remain an artist as we grow up. "}</Text>
					</View>

					<View style={styles.TextInputBgView}>
						<TextInput placeholder={'请翻译成中文'} placeholderTextColor={'#999999'} multiline={true} style={styles.TextInput}/>
					</View>

					{this.renderAnswer(this.state.isShowAnswer)}

					<View style={styles.EvaluationBgView}>
						<Text style={styles.EvaluationButtonText}>{'自我感觉:'}</Text>

						<TouchableOpacity onPress={() => {
							this.setState({
								evaluationSelectedIndex: 0
							})
						}} style={styles.EvaluationButton}>
							<Image source={this.state.evaluationSelectedIndex === 0 ? require('../../../resources/images/TabBar/Learn/btn_correct.png') : require('../../../resources/images/TabBar/Learn/btn_normal.png')} style={[styles.EvaluationButtonImageView, {marginLeft: 10}]}/>
							<Text style={[styles.EvaluationButtonText, {marginLeft: 10}]}>{'好'}</Text>
						</TouchableOpacity>

						<TouchableOpacity onPress={() => {
							this.setState({
								evaluationSelectedIndex: 1
							})
						}} style={styles.EvaluationButton}>
							<Image source={this.state.evaluationSelectedIndex === 1 ? require('../../../resources/images/TabBar/Learn/btn_seleted.png') : require('../../../resources/images/TabBar/Learn/btn_normal.png')} style={[styles.EvaluationButtonImageView, {marginLeft: 44}]}/>
							<Text style={[styles.EvaluationButtonText, {marginLeft: 10}]}>{'不好'}</Text>
						</TouchableOpacity>
					</View>
				</View>

				<View style={styles.FooterView} />
			</ScrollView>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height - 18,
		marginTop: NavigationBarHeight.height
	},
	ContainerView: {
		alignItems: 'center'
	},
	TitleTextBgView: {
		marginTop: 15,
		flexDirection: 'row',
		width: ScreenDimensions.width,
	},
	VoiceIconButton: {
		width: 30,
		height: 30,
		marginLeft: 15,
	},
	VoiceIconImageView: {
		width: 30,
		height: 30,
	},
	TitleText: {
		marginLeft: 10,
		fontSize: 18,
		color: '#333333',
		width: ScreenDimensions.width - 40 - 10 - 30,
	},
	TextInputBgView: {
		marginTop: 30,
		width: ScreenDimensions.width - 30,
		height: 165,
		backgroundColor: '#e5e5e5',
		borderTopLeftRadius: 6,
		borderTopRightRadius: 6,
	},
	TextInput: {
		width: ScreenDimensions.width - 30,
		height: 165,
		textAlignVertical: 'top',
		fontSize: 16,
		paddingLeft: 12,
		paddingTop: 12,
		paddingRight: 12,
		paddingBottom: 12
	},
	AnswerButtonText: {
		marginTop: 30,
		fontSize: 18,
		color: '#666666',
		marginBottom: 56,
	},
	AnswerText: {
		marginTop: 0,
		marginBottom: 25,
		width: ScreenDimensions.width - 30,
		height: (ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height - 76 - 160)/2.0,
		backgroundColor: '#efffe3',
		fontSize: 16,
		paddingLeft: 10,
		paddingTop:10,
		paddingRight:10,
		paddingBottom: 10,
		color: '#666666'
	},
	EvaluationBgView: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	EvaluationButton: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	EvaluationButtonImageView: {
		width: 22,
		height: 22,
	},
	EvaluationButtonText: {
		fontSize: 18,
		color: '#666666'
	},
	FooterView: {
		width: ScreenDimensions.width,
		height: 44,
		backgroundColor: '#ffffff'
	}
})