mobile / YH_RNComponent · Commits

Go to a project

Authored by 张丽霞
Commit 25859a5301937a6cf35f20da16fa97e7a63a2bbf 1 parent 147cdcf5

逛列表cell通用兼容，review by 盖剑秋

Inline Side-by-side
Showing 26 changed files with 8 additions and 242 deletions
... ... @@ -79,6 +79,7 @@ export default class List extends Component {
url,
share,
id,
isFavor,
} = this.props.resource.toJS();
let urlAry = url.split('&');
let shareParam = {
... ... @@ -92,10 +93,10 @@ export default class List extends Component {
if (!tagImg) {
tagImg = "../../image/chaopin_icon.png";
}
let likeImg = isPraise == 'N'?require('../../image/wsc_icon.png'):require('../../image/sc_icon.png');
let isLike = isPraise == 'N';
let likeImg = isFavor == 'N'?require('../../image/wsc_icon.png'):require('../../image/sc_icon.png');
let isLike = isFavor == 'N';
return (
<TouchableOpacity activeOpacity={0.5} onPress={() => {
<TouchableOpacity activeOpacity={1.0} onPress={() => {
this.props.onPressCell&&this.props.onPressCell(url, this.props.rowID, id);
}}>
<View style={styles.container}>
... ... @@ -113,10 +114,10 @@ export default class List extends Component {
<Text style={styles.text}>{publish_time}</Text>
<Image source={require('../../image/shared_view_icon.png')} style={styles.iconThumb}resizeMode={'contain'}></Image>
<Text style={styles.text}>{views_num}</Text>
<TouchableOpacity style={styles.likeButton} onPress={()=>{this.props.onPressLike&&this.props.onPressLike(id, isLike)}}>
<TouchableOpacity activeOpacity={1.0} style={styles.likeButton} onPress={()=>{this.props.onPressLike&&this.props.onPressLike(id, isLike)}}>
<Image source={likeImg}/>
</TouchableOpacity>
<TouchableOpacity style={styles.shareButton} onPress={()=>{this.props.onPressShare&&this.props.onPressShare(shareParam)}}>
<TouchableOpacity activeOpacity={1.0} style={styles.shareButton} onPress={()=>{this.props.onPressShare&&this.props.onPressShare(shareParam)}}>
<Image source={require('../../image/shared_sharebuttom_highlighted.png')}/>
</TouchableOpacity>
</View>
... ...
... ... @@ -69,7 +69,7 @@ export default function listReducer(state=initialState, action) {
let originAry = state.get('articles').get('list').toJS();
for (var i = 0; i < originAry.length; i++) {
if (originAry[i].id == article_id) {
originAry[i].isPraise = isLike?'Y':'N';
originAry[i].isFavor = isLike?'Y':'N';
}
}
let newState = state.setIn(['articles', 'list'], Immutable.fromJS(originAry));
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
Image,
ListView,
StyleSheet,
Dimensions,
TouchableOpacity,
InteractionManager,
Platform,
} from 'react-native';
import {getSlicedUrl} from '../../classify/utils/Utils';
export default class List extends Component {
constructor(props) {
super(props);
this._renderHeader = this._renderHeader.bind(this);
this.state = {
width: Dimensions.get('window').width,
height: Dimensions.get('window').width,
};
}
componentDidMount() {
let src = this.props.resource.src;
let bigPic = getSlicedUrl(src, 640, 640, 2);
Image.getSize(bigPic, (width, height) => {
let newWidth = Dimensions.get('window').width;
let newHeight = Dimensions.get('window').width/width*height;
this.setState({width: newWidth, height: newHeight });
});
}
_renderHeader() {
let {author} = this.props.resource.toJS();
if (this.props.type == 'editor' || !author) {
return null;
}
let {
url,
avatar,
name
} = author;
return (
<TouchableOpacity onPress={()=>{this.props.onPressHeader&&this.props.onPressHeader(url)}}>
<View style={styles.headerContainer}>
<Image style={styles.avatar} source={{uri:avatar}}/>
<Text style={styles.name}>{name}</Text>
</View>
</TouchableOpacity>
)
}
render() {
let tagMap = {
'潮品' :require('../image/chaopin_icon.png'),
'话题' :require('../image/huati_icon.png'),
'潮人' :require('../image/chaoren_icon.png'),
'搭配' :require('../image/dapei_icon.png'),
'小贴士' :require('../image/xiaotieshi_icon.png'),
'专题' :require('../image/zuanti_icon.png')
};
let {
browse,
category_name,
intro,
isPraise,
praise_num,
publish_time,
src,
title,
views_num,
url,
share,
id,
isFavor,
} = this.props.resource.toJS();
let urlAry = url.split('&');
let shareParam = {
title,
'content': intro,
'image': src,
'url': urlAry[0],
};
let bigPic = getSlicedUrl(src, 640, 640, 2);
let tagImg = tagMap[category_name];
if (!tagImg) {
tagImg = "../../image/chaopin_icon.png";
}
let likeImg = isFavor == 'N'?require('../image/wsc_icon.png'):require('../image/sc_icon.png');
return (
<TouchableOpacity activeOpacity={0.5} onPress={() => {
this.props.onPressCell&&this.props.onPressCell(url, this.props.rowID, id);
}}>
<View style={styles.container}>
<View style={styles.sapatorView}/>
{this._renderHeader()}
<Image style={styles.image,{width: this.state.width, height: this.state.height}} source={{uri:bigPic}}>
<Image style={styles.tagContainer} source={tagImg}>
<Text style={styles.tagText}>{category_name}</Text>
</Image>
</Image>
<Text style={styles.titleText}>{title}</Text>
<Text style={styles.contentText} numberOfLines={3}>{intro}</Text>
<View style={styles.toolContainer}>
<Image source={require('../image/time_icon.png')} style={styles.iconThumb}resizeMode={'contain'}></Image>
<Text style={styles.text}>{publish_time}</Text>
<Image source={require('../image/shared_view_icon.png')} style={styles.iconThumb}resizeMode={'contain'}></Image>
<Text style={styles.text}>{views_num}</Text>
<TouchableOpacity style={styles.likeButton} onPress={()=>{this.props.onPressLike&&this.props.onPressLike(id, isFavor)}}>
<Image source={likeImg}/>
</TouchableOpacity>
<TouchableOpacity style={styles.shareButton} onPress={()=>{this.props.onPressShare&&this.props.onPressShare(shareParam)}}>
<Image source={require('../image/shared_sharebuttom_highlighted.png')}/>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
);
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
contentContainer: {
backgroundColor: 'white',
},
sapatorView: {
backgroundColor: 'white',
width: width,
height: 16,
borderColor: 'rgb(215, 215, 215)',
borderTopWidth: 1,
borderBottomWidth: 1,
},
headerContainer: {
height: 60,
width: width,
backgroundColor: 'white',
flexDirection: 'row',
},
avatar: {
width: 30,
height: 30,
borderRadius: 15,
marginLeft: 17,
marginTop: 15,
},
name: {
fontSize: 17,
color: 'rgb(83, 83, 83)',
textAlign: 'left',
width: width - 80,
marginTop: 22,
marginLeft: 17,
},
image: {
width: width,
backgroundColor: 'gray',
height: width,
},
tagContainer: {
width: 88,
height: 25,
alignItems: 'center',
flexDirection: 'column',
},
tagText: {
backgroundColor: 'transparent',
color: 'white',
fontSize: 15,
textAlign: 'center',
paddingTop: 5,
paddingRight: 20,
},
titleText: {
backgroundColor: 'white',
color: 'black',
fontSize: 22,
marginLeft: 16,
width: width -32,
marginTop: 20,
},
contentText: {
backgroundColor: 'white',
color: 'gray',
fontSize: 14,
marginLeft: 16,
width: width - 32,
lineHeight: 25,
},
likeButton: {
position: 'absolute',
width: 17,
height: 16,
left: width - 100,
top:14,
},
shareButton: {
position: 'absolute',
width: 44,
height: 44,
left: width - 60,
top:0,
},
toolContainer: {
flexDirection: 'row',
height: 45,
width:width,
alignItems: 'center',
marginTop: 5,
},
iconThumb: {
marginLeft: 16,
height: 12,
width:20,
},
text: {
marginLeft: 5,
fontSize: 12,
color: 'gray'
},
});
... ... @@ -13,7 +13,7 @@ import {
} from 'react-native';
import {Map} from 'immutable';
import ListCell from './ListCell';
import ListCell from '../../guang/components/list/ListCell';
import LoadingIndicator from '../../common/components/LoadingIndicator';
import LoadMoreIndicator from '../../common/components/LoadMoreIndicator';
... ...