临时仓库

Home.js 9.1KB

    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' } })