123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- /**
- * 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,
- }
- })
|