|
import React, { Component } from 'react';
import {View,Text,Image,StyleSheet,FlatList,ScrollView,Dimensions} from 'react-native';
import SegmentedBar from './SegmentedBar'
import Carousel from './Carousel'
import DashSecondLine from './DashSecondLine'
import Header from './Header'
var {height,width} = Dimensions.get('window');
export default class Home extends Component{
// static navigationOptions = ({navigation,screenProps})=>({
// tabBarLabel: '首页',
// tabBarIcon: ({ focused, tintColor }) => <Image style={styles.tabImg} source={`${focused ? require('../static/img/home.png') : require('../static/img/home-unchoose.png')}`}/>,
// });
constructor(props) {
super(props);
this.barItems = [
{
title:'浏览记录',
type: 0,
content:[
{
timeText:'今天',
title:'3号免手洗',
time:'查看于1小时前',
},
{
timeText:'今天',
title:'3号免手洗',
time:'查看于1小时前',
},
{
timeText:'今天',
title:'3号免手洗',
time:'查看于1小时前',
},
{
timeText:'今天',
title:'3号免手洗',
time:'查看于1小时前',
},
{
timeText:'今天',
title:'3号免手洗',
time:'查看于1小时前',
},
{
timeText:'昨天',
title:'3号免手洗',
time:'查看于1小时前',
},
{
timeText:'昨天',
title:'3号免手洗',
time:'查看于1小时前',
},
{
timeText:'昨天',
title:'3号免手洗',
time:'查看于1小时前',
}
]
},{
title:'收藏列表',
type: 1,
content:[
{
title:'3号免手洗',
time:'收藏于1小时前',
}
]
}
];
this.justifyItemItems = ['fixed', 'scrollable'];
this.indicatorTypeItems = ['none', 'boxWidth', 'itemWidth', 'customWidth'];
this.indicatorPositionItems = ['top', 'bottom'];
if(!this.state){
this.state = {}
}
Object.assign(this.state, {
justifyItem: 'fixed',
indicatorType: 'itemWidth',
indicatorPosition: 'bottom',
animated: true,
autoScroll: true,
activeIndex: 0,
custom: false,
});
}
onSegmentedBarChange(index) {
if (index != this.state.activeIndex) {
this.setState({activeIndex: index});
if (this.refs.carousel) {
this.refs.carousel.scrollToPage(index, false);
}
}
}
onCarouselChange(index) {
index != this.state.activeIndex && this.setState({activeIndex: index});
}
getContent(item,_this){
console.log('2222'+JSON.stringify(_this.props))
if(item.type == 0){
return (
<View>
{item.content.map((itemChild,index)=>(
<View style={{flex:1,flexDirection:'row'}} key={'menu' + index}>
<Text style={{marginTop:30,marginLeft:15,marginRight:5,color:'#000'}}>{itemChild.timeText}</Text>
<View style={{marginRight:20,marginVertical:10,paddingHorizontal:20,paddingTop:20,borderWidth:1,borderColor:'#ddd',borderRadius:5,height:130}}>
<View style={{height:58}}>
<View style={{flex:1,flexDirection:'row',justifyContent: 'space-between'}}>
<View>
<Text style={{fontSize:15,height:18,color:'#000'}}>{itemChild.title}</Text>
<Text style={{fontSize:12,height:15,marginTop:10,color:'#bbb'}}>{itemChild.time}</Text>
</View>
<Image style={styles.tabImg} source={require('../static/img/qrcode.png')}/>
</View>
</View>
<DashSecondLine backgroundColor='#ddd' len={60} width={width-100}></DashSecondLine>
<View style={{flex:1,flexDirection:'row',justifyContent: 'space-between',marginTop:20}}>
<Image style={{width:15,height:15}} source={require('../static/img/delete.png')}/>
<Text onPress={()=>{_this.props.navigation.navigate('Details')}}>查看详情</Text>
</View>
</View>
</View>
))}
</View>)
}else{
return (
<View>
{item.content.map((itemChild,index)=>(
<View key={'menu' + index} style={{marginHorizontal:20,marginVertical:10,paddingHorizontal:20,paddingTop:20,borderWidth:1,borderColor:'#ddd',height:130,borderRadius:5 }}>
<View style={{height:58}}>
<View style={{flex:1,flexDirection:'row',justifyContent: 'space-between'}}>
<View>
<Text style={{fontSize:15,height:18}}>{itemChild.title}</Text>
<Text style={{fontSize:12,height:15,marginTop:10,color:'#bbb'}}>{itemChild.time}</Text>
</View>
<Image style={styles.tabImg} source={require('../static/img/qrcode.png')}/>
</View>
</View>
<DashSecondLine backgroundColor='#ddd' len={60} width={width-80}></DashSecondLine>
<View style={{flex:1,flexDirection:'row',justifyContent: 'space-between',marginTop:20}}>
<Text>已收藏</Text>
<Text onPress={()=>{_this.props.navigation.navigate('Details')}}>查看详情</Text>
</View>
</View>
))}
</View>)
}
}
render() {
let {justifyItem, indicatorType, indicatorPosition, animated, autoScroll, custom, activeIndex} = this.state;
let barItems = this.barItems;
return (
<View>
<Header title="我的二维码" leftEvent={()=>{}}></Header>
<SegmentedBar
justifyItem={justifyItem}
indicatorType={indicatorType}
indicatorPosition={indicatorPosition}
indicatorLineColor={'#00ff00'}
indicatorLineWidth={custom ? 1 : undefined}
indicatorPositionPadding={custom ? 3 : undefined}
animated={animated}
autoScroll={autoScroll}
activeIndex={activeIndex}
onChange={index => this.onSegmentedBarChange(index)}
>
{barItems.map((item, index) => { return(<SegmentedBar.Item key={'item' + index} active={activeIndex==index} title={item.title} />)})}
</SegmentedBar>
<Carousel
style={styles.carousel_style}
carousel={false}
startIndex={activeIndex}
cycle={false}
ref='carousel'
onChange={index => this.onCarouselChange(index)}
>
{barItems.map((item, index) => (
<ScrollView key={'view' + index}>
{this.getContent(item,this)}
</ScrollView>
))}
</Carousel>
</View>
)
}
}
const styles = StyleSheet.create({
tabImg:{
width: 30,
height: 30,
},
headImg:{
width: 40,
height: 50,
},
listContainer:{
flexDirection:'row',
alignItems:'center',
height:60,
paddingLeft:20,
paddingRight:20,
borderBottomWidth:1,
borderBottomColor:"#ddd"
},
textContainer:{
flexDirection:'column',
alignItems:'flex-start',
height:60,
marginLeft:20,
},
item:{
marginLeft:20,
marginRight:20,
},
carousel_style:{
backgroundColor: '#fff',
height: height-80,
borderTopWidth: 1,
borderTopColor: '#f8f8f8'
}
})
|