campus_react_local/App/views/base/BaseNavigationBar.js

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

export default class BaseNavigationBar extends Component {
	constructor(props) {
		super(props)
		this.state = {
			dataSources: props.dataSources,
			selectedIndex: props.selectedIndex,
			refreshing:props.refreshing||true
		}
	}

	componentWillReceiveProps(props) {
		this.setState({
			dataSources: props.dataSources,
			selectedIndex: props.selectedIndex,
			refreshing:true,
		})
	}

	renderItem(item) {
		// console.log('renderItem')
		return(
			<BaseNavigationBarListItem
				title = {item.title}
				isSelected = {this.state.selectedIndex === item.index}
				didSelectedItem = {() => {
					let datas = []
					for (let i = 0; i < this.state.dataSources.length; i ++) {
						datas.push(this.state.dataSources[i])
					}
					this.props.didSelectedItem(item.index)
					this.setState({dataSources: datas,selectedIndex: item.index})
				}}
			/>
		)
	}

	render() {
		return (
			<View style={styles.View}>
				<View style={styles.ListView}>
					<FlatList
						data={this.state.dataSources}
						keyExtractor={(item, index) => { return 'key' + item.key + index }}
						renderItem={({item}) => this.renderItem(item)}
						horizontal={true}
						showsHorizontalScrollIndicator={false}
                        refreshing={this.state.refreshing}
						refreshHandler={()=>{}}
					/>
				</View>

				<Image style={styles.MineLeftLineImageView} source={require('../../resources/images/BaseNavigationBar/阴影分割.png')}/>
				<TouchableOpacity onPress={() => {
					this.props.didClickedMineItem()
				}} style={styles.MineBgView}>
					<Image style={styles.MineImageView} source={require('../../resources/images/BaseNavigationBar/icon-mine.png')}/>
				</TouchableOpacity>

				<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: 'space-between',
		elevation: 5, //only for android
		zIndex:999,
	},
	ListView: {
		marginTop: Platform.OS === 'ios' ? 20 : 0,
		marginLeft: 15,
		width: ScreenDimensions.width - 15 - (Platform.OS === 'ios' ? 44 : 56),
		height: Platform.OS === 'ios' ? (NavigationBarHeight.height - 20) : NavigationBarHeight.height,
	},
	MineBgView: {
		marginTop: Platform.OS === 'ios' ? 20 : 0,
		width: 	(Platform.OS === 'ios' ? 44 : 56),
		height: Platform.OS === 'ios' ? (NavigationBarHeight.height - 20) : NavigationBarHeight.height,
		flexDirection: 'row',
		alignItems: 'center',
	},
	MineImageView: {
		width: 	21,
		height: 22,
		marginLeft: Platform.OS === 'ios' ? 10 : 15
	},
	MineLeftLineImageView: {
		height: 30,
		width: 11,
		position: 'absolute',
		top: Platform.OS === 'ios' ? 27 : 13,
		right: Platform.OS === 'ios' ? 44 : 56
	},
	BottomLineView: {
		width: ScreenDimensions.width,
		height: 0.5,
		backgroundColor: '#cacaca',
		position: 'absolute',
		left: 0,
		bottom: 0,
	}
})