123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- /**
- * Created by zack on 2018/4/29.
- */
- import {
- View,
- Text,
- StyleSheet,
- Image,
- TouchableOpacity,
- FlatList,
- Platform
- } from 'react-native'
- import React, {Component} from 'react'
- import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../../utils/DimensionsTools'
- import {CachedImage} from 'react-native-img-cache'
- import ImageLoader from 'react-native-smart-image-loader'
-
- export default class AnswerQuestionItem extends Component {
- constructor(props) {
- super(props)
- this.state = {
- title: props.title,
- subTitle: props.subTitle,
- imageUrls: props.imageUrls,
- commentCount: props.commentCount,
- likes: props.likes
- }
- }
-
- componentWillReceiveProps(props) {
- this.setState({
- title: props.title,
- subTitle: props.subTitle,
- imageUrls: props.imageUrls,
- commentCount: props.commentCount,
- likes: props.likes
- })
- }
-
- shouldComponentUpdate(nextProps) {
- if (nextProps.title !== this.state.title ||
- nextProps.subTitle !== this.state.subTitle ||
- nextProps.imageUrls !== this.state.imageUrls ||
- nextProps.commentCount !== this.state.commentCount ||
- nextProps.likes !== this.state.likes
- ) {
- 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() {
- let desc = this.state.commentCount + '人回答' + ' ' + this.state.likes + '人收藏'
- return(
- <View style={styles.View}>
- <Text style={styles.TitleText}>{this.state.title}</Text>
- <Text style={styles.SubTitleText}>{this.state.subTitle}</Text>
-
- <View style={styles.ImageContainerView}>
- {this.renderImageViews()}
- </View>
-
- <Text style={styles.AnswerNumberText}>{desc}</Text>
- <View style={styles.BottomLineView} />
- </View>
- )
- }
- }
-
- const styles = StyleSheet.create({
- View: {
- width: ScreenDimensions.width,
- backgroundColor: 'white'
- },
- TitleText: {
- marginTop: 25,
- fontSize: 17,
- color: '#000000',
- marginLeft: 22,
- marginRight: 22,
- },
- SubTitleText: {
- marginTop: 22,
- fontSize: 15,
- color: '#505050',
- marginLeft: 22,
- marginRight: 22,
- },
- AnswerNumberText: {
- marginLeft: 24,
- marginTop: 22,
- fontSize: 15,
- color: '#9c9c9c',
- marginBottom: 13,
- },
- BottomLineView: {
- position: 'absolute',
- width: ScreenDimensions.width,
- height: 0.5,
- backgroundColor: '#d7d7d7',
- left: 0,
- bottom: 0,
- },
- ImageContainerView: {
- marginTop: 30,
- width: ScreenDimensions.width - 30,
- marginLeft: 15,
- flexDirection: 'row',
- flexWrap: 'wrap'
- },
- ImageView: {
- width: (ScreenDimensions.width - 30 - 16)/3.0,
- height: (ScreenDimensions.width - 30 - 16)/3.0,
- }
- })
|