campus_react_local/App/views/community/Follow/View/FollowPageViewNavigationBar.js

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

export default class FollowPageViewNavigationBar extends Component {
	constructor(props) {
		super(props)
		this.state = {
			selectedTagIndex: props.selectedTagIndex
		}
	}

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

	shouldComponentUpdate(nextProps) {
		if (nextProps.selectedTagIndex !== this.state.selectedTagIndex) {
			return true
		}

		return false
	}

	didSelectedTagIndex(index) {
		this.setState({selectedTagIndex: index})
		this.props.didSelectedTagIndex(index)
	}

	render() {
		return (
			<View style={styles.View}>
				<View style={styles.NavigationBarView}>
					<TouchableOpacity onPress={() => {
						this.props.didClickLeftButton()
					}} style={styles.LeftView}>
						<Image source={require("../../../../resources/images/TabBar/Community/Follow/left.png")}/>
						<Text style={styles.LeftText}>{this.state.leftTitle}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => this.didSelectedTagIndex(0)} style={[styles.TagButtonView, {marginRight: 55,}]}>
						<Text style={[styles.TagButtonText, {color: this.state.selectedTagIndex === 0 ? '#fc4747' : '#000000'}]}>{"推荐"}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => this.didSelectedTagIndex(1)}  style={styles.TagButtonView}>
						<Text style={[styles.TagButtonText, {color: this.state.selectedTagIndex === 1 ? '#fc4747' : '#000000'}]}>{"名人"}</Text>
					</TouchableOpacity>

				</View>

				<View style={styles.BottomLineView} />
			</View>
		);
	}
}

const styles = StyleSheet.create({
	View: {
		position: 'absolute',
		left: 0,
		top: 0,
		height: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		backgroundColor: "#ffffff",
		shadowColor: "#eeeeee",
		shadowOffset: {
			width: 0,
			height: -1
		},
		shadowRadius: 0,
		shadowOpacity: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		elevation: 5, //only for android
	},
	NavigationBarView: {
		marginTop: Platform.OS === 'ios' ? 20 : 0,
		width: ScreenDimensions.width,
		height: Platform.OS === 'ios' ? (NavigationBarHeight.height - 20) : NavigationBarHeight.height,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
	},
	LeftView: {
		left: 15,
		justifyContent: 'center',
		flexDirection: 'row',
		alignItems: 'center',
		position: 'absolute',
	},
	LeftText: {
		fontSize: 14,
		color: '#999999',
		marginLeft: 5,
	},

	TagButtonView: {
		justifyContent: 'center',
		alignItems: 'center',
		height: 44,
	},
	TagButtonText: {
		fontSize: 18,
	},
	BottomLineView: {
		width: ScreenDimensions.width,
		height: 0.5,
		backgroundColor: '#cacaca',
		position: 'absolute',
		left: 0,
		bottom: 0,
	}
})