123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- /**
- * Created by zack on 2018/5/22.
- */
- import {
- View,
- Text,
- StyleSheet,
- FlatList,
- Platform,
- TouchableOpacity,
- Image
- } from 'react-native'
- import React, {Component} from 'react'
- import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../../utils/DimensionsTools'
- import ImageLoader from 'react-native-smart-image-loader'
-
- export default class PicAndTextDetailHeaderItem extends Component {
- constructor(props) {
- super(props)
- this.state = {
- imageUrls: props.imageUrls,
- title: props.title,
- }
- }
-
- // componentWillReceiveProps(props) {
- // this.setState({
- // imageUrls: props.imageUrls,
- // title: props.title,
- // })
- // }
- //
- // shouldComponentUpdate(nextProps) {
- // if (nextProps.imageUrls !== this.state.imageUrls ||
- // nextProps.title !== this.state.title
- // ) {
- // return true
- // }
- //
- // return false
- // }
-
- renderImageViews() {
- let imageViews = []
-
- for (let i = 0; i < this.state.imageUrls.length; i ++) {
- let imageLoader = (
- <ImageLoader
- key = {i}
- style={[styles.ImageView, {marginBottom: (i < 3 ? 8 : 0), marginRight: (i > 0 && (i+ 1)%3 === 0) ? 0 : 8}]}
- options={{
- src: this.state.imageUrls[i],
- }}
- />)
- imageViews.push(imageLoader)
- }
-
- return imageViews
- }
-
- render() {
- return(
- <View style={styles.View}>
- <Text style={styles.TimeText}>{'15分钟前'}</Text>
- <Text style={styles.TitleText}>{this.state.title}</Text>
-
- <TouchableOpacity onPress={() => {
- this.props.didClickImageViewContainer()
- }} style={styles.ImageContainerView}>
- {this.renderImageViews()}
- </TouchableOpacity>
-
- <View style={styles.BottomLineView}/>
- </View>
- )
- }
- }
-
- const styles = StyleSheet.create({
- View: {
- width: ScreenDimensions.width,
- backgroundColor: 'white'
- },
- TimeText: {
- fontSize: 13,
- color: '#6c6c6c',
- marginTop: 13,
- marginLeft: 23,
- },
- TitleText: {
- fontSize: 16,
- color: '#05120b',
- marginTop: 13,
- marginLeft: 23,
- },
- ImageContainerView: {
- marginTop: 17,
- width: ScreenDimensions.width - 30,
- marginLeft: 15,
- flexDirection: 'row',
- flexWrap: 'wrap',
- marginBottom: 10,
- },
- ImageView: {
- width: (ScreenDimensions.width - 30 - 16)/3.0,
- height: (ScreenDimensions.width - 30 - 16)/3.0,
- },
- BottomLineView: {
- width: ScreenDimensions.width,
- height: 8,
- backgroundColor: '#efeff4'
- }
- })
|