campus_react_local/App/views/LearnLevel/LearnLevelViewController.js

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

export default class LearnLevelViewController extends Component {
	constructor(props) {
		super(props)
		this.state = {
			selectedSegmentIndex: 0,
			selectedLearnLevelIndex: 0,
			selectedCategoryIndex: 0,
			isPush: props.isPush
		}

	}

	componentDidMount() {
	}

	goToTabar() {
		const BaseNavigatorStyle = {
			drawUnderNavBar: true,
			drawUnderTabBar: true,
			navBarHidden: true,
			navBarBackgroundColor: '#ffffff',
			navBarButtonColor: '#000000',
			navBarTranslucent: Platform.OS === 'ios' ? true : false,
			navBarTitleTextCentered: 'center'
		}

		Navigation.startTabBasedApp({
			tabs: [
				{
					label: '玩双语', // tab label as appears under the icon in iOS (optional)
					screen: 'PlayViewController', // unique ID registered with Navigation.registerScreen
					icon: require('../../resources/images/TabBar/play.png'), // local image asset for the tab icon unselected state (optional on iOS)
					selectedIcon: require('../../resources/images/TabBar/icon玩双语hover.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
					title: '', // title of the screen as appears in the nav bar (optional)
					navigatorStyle: BaseNavigatorStyle
				},
				{
					label: '学双语', // tab label as appears under the icon in iOS (optional)
					screen: 'LearnViewController', // unique ID registered with Navigation.registerScreen
					icon: require('../../resources/images/TabBar/icon学双语.png'), // local image asset for the tab icon unselected state (optional on iOS)
					selectedIcon: require('../../resources/images/TabBar/icon学双语hover.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
					title: '单词', // title of the screen as appears in the nav bar (optional)
					subtitle: "2/10",
					navigatorStyle: BaseNavigatorStyle
				},
				{
					label: Platform.OS === 'ios' ? '' : '视频', // tab label as appears under the icon in iOS (optional)
					screen: 'CameraViewController', // unique ID registered with Navigation.registerScreen
					icon: require('../../resources/images/TabBar/camera.png'), // local image asset for the tab icon unselected state (optional on iOS)
					selectedIcon: require('../../resources/images/TabBar/camera.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
					// title: '', // title of the screen as appears in the nav bar (optional)
					navigatorStyle: BaseNavigatorStyle,
					iconInsets: { // add this to change icon position (optional, iOS only).
						top: 0, // optional, default is 0.
						left: 0, // optional, default is 0.
						bottom: -12, // optional, default is 0.
						right: 0 // optional, default is 0.
					},
				},
				{
					label: '社区', // tab label as appears under the icon in iOS (optional)
					screen: 'CommunityViewController', // unique ID registered with Navigation.registerScreen
					icon: require('../../resources/images/TabBar/icon社区.png'), // local image asset for the tab icon unselected state (optional on iOS)
					selectedIcon: require('../../resources/images/TabBar/icon社区.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
					title: '', // title of the screen as appears in the nav bar (optional)
					navigatorStyle: BaseNavigatorStyle
				},
				{
					label: '聊天', // tab label as appears under the icon in iOS (optional)
					screen: 'ChatViewController', // unique ID registered with Navigation.registerScreen
					icon: require('../../resources/images/TabBar/chat.png'), // local image asset for the tab icon unselected state (optional on iOS)
					selectedIcon: require('../../resources/images/TabBar/chathover.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
					title: '', // title of the screen as appears in the nav bar (optional)
					navigatorStyle: BaseNavigatorStyle
				},
			],
			tabsStyle: {
				//	navBarBackgroundColor: '#377bb5',
				// 	navBarTextColor: '#000000',
				// 	navBarTranslucent: Platform.OS === 'ios' ? true : false,
				// 	drawUnderNavBar: true,
				//navBarTextColor: 'white',
				//	navBarButtonColor: 'white',
				//	statusBarTextColorScheme: 'light',
				// drawUnderTabBar: true,
				//	statusBarColor: '#0281c5',
				//	navBarSubtitleColor: 'white',

				tabBarSelectedButtonColor: '#f01414', // iOS only. change the color of the selected tab text
				tabBarButtonColor: '#333333',
				tabBarLabelColor: '#333333', // iOS only. change the color of tab text
				tabBarSelectedLabelColor: '#f01414',

			},
			appStyle: {
				forceTitlesDisplay: true,
				tabBarSelectedButtonColor: '#f01414', // iOS only. change the color of the selected tab text
				tabBarButtonColor: '#333333',
				tabBarLabelColor: '#333333', // iOS only. change the color of tab text
				tabBarSelectedLabelColor: '#f01414',
			}
		})
	}

	ChangeLearnLevelAction(index) {
		this.setState({selectedLearnLevelIndex: index})
	}

	renderMenuViewItem() {
		let menus = []
		let menuTitles = ["综合", "单词","综合", "句子","语法", "听力","翻译"]

		for (let i = 0; i < menuTitles.length; i ++) {
			let title = menuTitles[i]
			let item = (
				<TouchableOpacity onPress={() => {
					this.setState({selectedCategoryIndex: i})
				}} style={[styles.BaseButtonView, {marginTop: i < 3 ? 0 : 12}, {backgroundColor: this.state.selectedCategoryIndex === i ? '#71c135' : '#e5e5e5'}]} key = {i}>
					<Text style={[styles.SegmentControlText, {color: this.state.selectedCategoryIndex === i ? '#ffffff' : '#666666'}]}>{title}</Text>
				</TouchableOpacity>
			)
			menus.push(item)
		}

		return menus
	}

	render() {
		let leftSegmentBorderColor = '#71c135'
		let leftSegmentBackgroundColor = "#71c135"

		let rightSegmentBorderColor = '#ffffff'
		let rightSegmentBackgroundColor = "#71c135"

		if (this.state.selectedSegmentIndex === 0) {
			leftSegmentBackgroundColor = "#71c135"

			rightSegmentBorderColor = '#71c135'
			rightSegmentBackgroundColor = "#ffffff"

		}else {
			leftSegmentBackgroundColor = "#ffffff"

			rightSegmentBorderColor = '#71c135'
			rightSegmentBackgroundColor = "#71c135"

		}
		return(
			<View style={styles.View}>
				<View style={styles.SegmentControlBgView}>
					<TouchableOpacity onPress={() => {
						this.setState({selectedSegmentIndex: 0})
					}} style={[styles.SegmentControlLeftView, {backgroundColor: leftSegmentBackgroundColor, borderLeftColor: leftSegmentBorderColor, borderTopColor: leftSegmentBorderColor, borderBottomColor: leftSegmentBorderColor}]}>
						<Text style={[styles.SegmentControlText, {color: this.state.selectedSegmentIndex === 0 ? '#ffffff' : '#71c135'}]}>{'学英文'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.setState({selectedSegmentIndex: 1})
					}} style={[styles.SegmentControlRightView,{ borderRightColor: rightSegmentBorderColor, borderTopColor: rightSegmentBorderColor, borderBottomColor: rightSegmentBorderColor}, {backgroundColor: rightSegmentBackgroundColor}]}>
						<Text style={[styles.SegmentControlText, {color: this.state.selectedSegmentIndex === 1 ? '#ffffff' : '#71c135'}]}>{'学中文'}</Text>
					</TouchableOpacity>
				</View>

				<View style={styles.LearnLevelBgView}>
					<TouchableOpacity onPress={() => {
						this.ChangeLearnLevelAction(0)
					}} style={[styles.BaseButtonView, {backgroundColor: this.state.selectedLearnLevelIndex === 0 ? '#71c135' : '#e5e5e5'}]}>
						<Text style={[styles.SegmentControlText, {color: this.state.selectedLearnLevelIndex === 0 ? '#ffffff' : '#666666'}]}>{'初级'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.ChangeLearnLevelAction(1)
					}} style={[styles.BaseButtonView, {backgroundColor: this.state.selectedLearnLevelIndex === 1 ? '#71c135' : '#e5e5e5'}]}>
						<Text style={[styles.SegmentControlText, {color: this.state.selectedLearnLevelIndex === 1 ? '#ffffff' : '#666666'}]}>{'中级'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.ChangeLearnLevelAction(2)
					}} style={[styles.BaseButtonView, {backgroundColor: this.state.selectedLearnLevelIndex === 2 ? '#71c135' : '#e5e5e5'}]}>
						<Text style={[styles.SegmentControlText, {color: this.state.selectedLearnLevelIndex === 2 ? '#ffffff' : '#666666'}]}>{'高级'}</Text>
					</TouchableOpacity>
				</View>

				<View style={styles.CategoryBgView}>
					{this.renderMenuViewItem()}
				</View>

				<TouchableOpacity onPress={() => {
					if (this.state.isPush) {
						this.props.navigator.dismissModal()
					}else {
						this.goToTabar()
					}
				}} style={[styles.BeginButtonView,]}>
					<Text style={{fontSize: 18, color: '#ffffff'}}>{this.state.isPush === true ? '完成' : '开始' }</Text>
				</TouchableOpacity>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: 'white',
		alignItems: 'center'
	},
	SegmentControlBgView: {
		marginTop: 40 + (Platform.OS === 'ios'? 20 : 0),
		width: 200,
		height: 40,
		flexDirection: 'row',
		alignItems: 'center',
		// borderRadius: 20,
		// borderColor: '#71c135',
		// borderWidth: 1
	},
	SegmentControlLeftView: {
		width: 100,
		height: 40,
		justifyContent: 'center',
		alignItems: 'center',
		borderTopLeftRadius: 20,
		borderBottomLeftRadius: 20,
		borderLeftWidth: 1,
		borderTopWidth: 1,
		borderBottomWidth: 1,
	},
	SegmentControlRightView: {
		width: 100,
		height: 40,
		justifyContent: 'center',
		alignItems: 'center',
		borderTopRightRadius: 20,
		borderBottomRightRadius: 20,
		borderRightWidth: 1,
		borderTopWidth: 1,
		borderBottomWidth: 1,
	},
	SegmentControlText: {
		fontSize: 18,
	},
	BaseButtonView: {
		width: 80,
		height: 40,
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 6,
		backgroundColor: '#e5e5e5'
	},
	LearnLevelBgView: {
		marginTop: 30,
		width: 260,
		height: 40,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	},
	CategoryBgView: {
		marginTop: 30,
		width: 260,
		flexDirection: 'row',
		justifyContent: 'space-between',
		flexWrap: 'wrap'
	},
	BeginButtonView: {
		position: 'absolute',
		width: ScreenDimensions.width - 30,
		height: 48,
		borderRadius: 24,
		justifyContent: 'center',
		alignItems: 'center',
		left: 15,
		bottom: 18,
		backgroundColor: '#71c135'
	}
})