|
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, FlatList, ScrollView, Dimensions, TouchableOpacity } from 'react-native';
import SegmentedBar from './SegmentedBar'
import Carousel from './Carousel'
import DashSecondLine from './DashSecondLine'
import Header from './Header'
import CodeDetail from './CodeDetail'
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);
// var 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小时前',
// }
// ]
// }
// ];
var history = {
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小时前',
}
]
}
var collect = {
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,
history: history,
collect: collect
});
}
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) {
if (item.type == 0) {
return (
<View>
{item.content.length == 0 ? <View>
<View style={{ flex: 1, justifyContent: 'center', alignContent: 'center', alignItems: 'center', flexDirection: 'column', textAlign: 'center', height: height - 130 }}>
<Image style={[styles.noResult]} source={require('../static/img/no_result.png')} />
<Text style={{ textAlign: 'center', fontSize: 15, marginTop: 15 }}>这里空空如也，快去扫描看看</Text>
</View>
</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>
<TouchableOpacity onPress={() => {
this.refs.dialog._setModalVisible(true);
}}>
<Image style={styles.tabImg} source={require('../static/img/qrcode.png')} />
</TouchableOpacity>
</View>
</View>
<DashSecondLine backgroundColor='#ddd' len={60} width={width - 100}></DashSecondLine>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }}>
<TouchableOpacity onPress={() => { item.content.splice(index, 1); _this.setState({ history: item }) }}>
<Image style={{ width: 15, height: 15 }} source={require('../static/img/delete.png')} />
</TouchableOpacity>
<Text onPress={() => { _this.props.navigation.navigate('Details') }}>查看详情</Text>
</View>
</View>
</View>
))}
</View>)
} else {
return (
<View>
{item.content.length == 0 ? <View>
<View style={{ flex: 1, justifyContent: 'center', alignContent: 'center', alignItems: 'center', flexDirection: 'column', textAlign: 'center', height: height - 130 }}>
<Image style={[styles.noResult]} source={require('../static/img/no_result.png')} />
<Text style={{ textAlign: 'center', fontSize: 15, marginTop: 15 }}>这里空空如也，快去收藏看看</Text>
</View>
</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>
<TouchableOpacity onPress={() => {
this.refs.dialog._setModalVisible(true);
}}>
<Image style={styles.tabImg} source={require('../static/img/qrcode.png')} />
</TouchableOpacity>
</View>
</View>
<DashSecondLine backgroundColor='#ddd' len={60} width={width - 80}></DashSecondLine>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }}>
<TouchableOpacity onPress={() => { item.content.splice(index, 1); _this.setState({ collect: item }) }}>
<Text>取消收藏</Text>
</TouchableOpacity>
<Text onPress={() => { _this.props.navigation.navigate('Details') }}>查看详情</Text>
</View>
</View>
))}
</View>)
}
}
render() {
let { justifyItem, indicatorType, indicatorPosition, animated, autoScroll, custom, activeIndex } = this.state;
var barItems = [];
barItems.push(this.state.history);
barItems.push(this.state.collect);
console.log(barItems)
return (
<View>
<Header title="我的二维码"></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>
<CodeDetail ref="dialog"/>
</View>
)
}
}
const styles = StyleSheet.create({
tabImg: {
width: 30,
height: 30,
},
noResult: {
width: 100,
height: 100,
},
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'
}
})
|
