mobile / YH_RNComponent · Commits

Go to a project

Authored by shangjf
Commit 8521e5cdf7f2c3f42426b5201eca8030376ebcb9 1 parent 7b1da5ce

首页男女频道你可能喜欢列表，楼层优化 review by 于良

Inline Side-by-side
Showing 11 changed files with 90 additions and 85 deletions
... ... @@ -34,8 +34,8 @@ export default class AppHotBrands extends React.Component {
render() {
let {title, image, list} = this.props.data.toObject();
let lineNumber = parseInt((list.length + 3) / 4);
if (list.length % 4 == 0) {
let lineNumber = parseInt((list.size + 3) / 4);
if (list.size % 4 == 0) {
lineNumber += 1;
}
let listHeight = Math.ceil(lineNumber * imageHeight);
... ... @@ -88,8 +88,6 @@ let imageHeight = Math.floor(87 * DEVICE_WIDTH_RATIO);
let styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flexDirection: 'row',
flexWrap: 'wrap',
width: width,
},
listContainer: {
... ...
... ... @@ -55,12 +55,19 @@ export default class AppIconList extends React.Component {
if (!data.length) {
return null;
}
let count = parseInt(this.props.number);
let tail = (data.length%count != 0) ? 1 : 0;
let lineNumber = data.length/count + tail;
let padding = count == 4 ? padding4 : padding5;
let containerHeight = (count == 4 ? 84 : 75) * lineNumber + padding * (lineNumber - 1) + 12*width/320 + 19;
let listContainerStyle = styles.brandContainer;
if (this.props.number == '4') {
listContainerStyle = styles.brandContainer4
}
return(
<Image style={styles.container} source={{uri:this.props.backImage}}>
<Image style={[styles.container, {height: containerHeight}]} source={{uri:this.props.backImage}}>
<ListView
contentContainerStyle={listContainerStyle}
enableEmptySections={true}
... ...
... ... @@ -39,13 +39,15 @@ export default class NewProductFloor extends Component{
let rightSmallTopRightImageUrl = SlicedImage.getSlicedUrl(imglst.get(3).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
let rightSmallBottomRightImageUrl = SlicedImage.getSlicedUrl(imglst.get(4).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
let containerHeight = 40 + leftBigImageHeight;
return(
<View style={styles.container}>
<View style={[styles.container, {height: containerHeight}]}>
<HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} onPressTitleMore={this.props.onPressTitleMore}/>
<View style={styles.imageContainer}>
<TouchableOpacity style={styles.leftBigImageContainer} activeOpacity={1}
<TouchableOpacity style={styles.leftBigImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(0).toJS())}>
<YH_Image style={styles.leftBigImage} url={leftBigImageUrl}/>
</TouchableOpacity>
... ... @@ -165,4 +167,3 @@ let styles = StyleSheet.create({
});
... ...
... ... @@ -71,28 +71,22 @@ export default class PopularSingleProduct extends Component{
// let bannerImageUrl = SlicedImage.getSlicedUrl(bannerImage.get(0).get("src"), width, bannerHeight, 2);
let containerHeight = 40 + bannerHeight + 202;
return(
<View style={styles.container}>
<View style={[styles.container, {height: containerHeight}]}>
<HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} onPressTitleMore={this.props.onPressTitleMore} />
<ImageSlider
resource={banner}
sliderWidth={width}
sliderHeight={bannerHeight}
onPressSlideItem={this.props.onPressSlideItem}
/>
<ListView
style={styles.listViewContainer}
dataSource={this.dataSource.cloneWithRows(imglst.toArray())}
horizontal={true}
renderRow={this.renderRow}
renderRow={this.renderRow}
/>
</View>
);
}
... ... @@ -103,15 +97,15 @@ let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let bannerHeight = Math.ceil(width * 234 / 750);
let goodsImageWidth = Math.ceil(90 * DEVICE_WIDTH_RATIO);
let goodsImageHeight = Math.ceil(120 * DEVICE_WIDTH_RATIO);
let goodsImageWidth = Math.ceil(90);
let goodsImageHeight = Math.ceil(120);
width = Math.ceil(width);
let styles = StyleSheet.create({
container: {
width: width,
backgroundColor: 'white'
},
bannerImage: {
... ... @@ -119,25 +113,22 @@ let styles = StyleSheet.create({
height: bannerHeight,
},
listViewContainer: {
width: width,
height: 202 * DEVICE_WIDTH_RATIO,
paddingTop: 12 * DEVICE_WIDTH_RATIO,
paddingBottom: 12 * DEVICE_WIDTH_RATIO,
height: 202,
paddingTop: 12,
paddingBottom: 12,
backgroundColor: '#ffffff',
},
goodsContainer: {
width: 90 * DEVICE_WIDTH_RATIO,
height: 178 * DEVICE_WIDTH_RATIO,
marginLeft: 11 * DEVICE_WIDTH_RATIO,
backgroundColor: '#f0f0f0',
width: 90,
height: 178,
marginLeft: 11,
borderRadius: 3,
backgroundColor: 'white',
},
goodsImage: {
width: goodsImageWidth,
height: goodsImageHeight,
... ... @@ -149,7 +140,7 @@ let styles = StyleSheet.create({
fontSize: 12,
color: '#444444',
textAlign: 'center',
marginTop: 3 * DEVICE_WIDTH_RATIO,
marginTop: 3,
},
goodsLookNum: {
... ... @@ -160,9 +151,4 @@ let styles = StyleSheet.create({
textAlign: 'center',
},
});
... ...
... ... @@ -37,9 +37,9 @@ export default class RecommendContentFive extends React.Component {
let data = list.toArray();
let lineNumber = parseInt((data.length + 3) / 4);
let listHeight = Math.floor(lineNumber * imageHeight);
let containerHeight = listHeight + 40;
return (
<View style={styles.container}>
<View style={[styles.container, {height: containerHeight}]}>
<HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} onPressTitleMore={this.props.onPressTitleMore}/>
<View style={[styles.list, {height: listHeight}]}>
{data.map((item, i) => {
... ... @@ -63,7 +63,7 @@ export default class RecommendContentFive extends React.Component {
<View style={styles.hLine1} />
<View style={styles.hLine2} />
</View>
</View>
);
}
... ...
... ... @@ -37,36 +37,33 @@ export default class SixLinesFloor extends Component{
goodsImageUrl = SlicedImage.getSlicedUrl(goodsImageUrl, imageWidth, imageHeight, 2);
return(
<TouchableOpacity activeOpacity={1}
<TouchableOpacity activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(rowData.toJS())}>
<YH_Image style={styles.goodsImage} url={goodsImageUrl} />
</TouchableOpacity>
);
}
render(){
let data = this.props.data;
let title = data.get("title");
let imglst = data.get("list");
let lineNumber = Math.floor((imglst.size + 1)/2);
let containerHeight = 40 + lineNumber * imageHeight;
return(
<View style={styles.container}>
<HeadTitleCell title={title.get('name')} moreUrl={title.get('more_url')} onPressTitleMore={this.props.onPressTitleMore} />
<View style={[styles.container, {height: containerHeight}]}>
<HeadTitleCell title={title.get('name')} moreUrl={title.get('more_url')} onPressTitleMore={this.props.onPressTitleMore}/>
<ListView
contentContainerStyle={styles.listViewContainer}
dataSource={this.dataSource.cloneWithRows(imglst.toArray())}
renderRow={this.renderRow}/>
renderRow={this.renderRow}/>
</View>
);
}
};
let {width} = Dimensions.get('window');
... ... @@ -77,7 +74,6 @@ let imageHeight = Math.floor(imageWidth * 180 / 375);
let styles = StyleSheet.create({
container: {
width: width,
},
... ... @@ -96,4 +92,3 @@ let styles = StyleSheet.create({
});
... ...
... ... @@ -32,7 +32,7 @@ export default class TrendsetterCollocation extends React.Component {
return true;
}
}
renderRow(rowData, sectionID, rowID) {
let url = YH_Image.getSlicedUrl(rowData.get('src'), cellWidth, cellWidth, 2);
return (
... ... @@ -103,7 +103,7 @@ export default class TrendsetterCollocation extends React.Component {
let {width, height} = Dimensions.get('window');
let topCellWidth = (width - 45) / 2;
let cellWidth = 82 * width / 375;
let cellWidth = Math.floor(82 * width / 375);
let containerHeight = 40 + topCellWidth + 15 * 2 + 40 + cellWidth;
... ...
... ... @@ -14,6 +14,7 @@ import ReactNative, {
} from 'react-native';
import Immutable, {Map} from 'immutable';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import HeadTitleCell from '../cell/HeadTitleCell';
import Focus from '../floor/Focus';
import AppIconList from '../floor/AppIconList';
... ... @@ -40,7 +41,7 @@ import NewUserFloor from '../floor/NewUserFloor';
import VipUserFloor from '../floor/VipUserFloor';
import ActivityProductFloor from '../floor/ActivityProductFloor';
import HotCategoryIndividualization from '../floor/HotCategoryIndividualization';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
import ProductListCell from '../../../common/components/ListCell/ProductListCell';
export default class Home extends Component {
... ... @@ -52,6 +53,7 @@ export default class Home extends Component {
this.trigggePullToRefresh = this.trigggePullToRefresh.bind(this);
this._floorCellRender = this._floorCellRender.bind(this);
this._currentChannelData = this._currentChannelData.bind(this);
this._renderSectionHeader = this._renderSectionHeader.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
... ... @@ -98,21 +100,23 @@ export default class Home extends Component {
case 'floor': {
return this._floorCellRender(rowData);
}
break;
case 'favoriteHeader': {
return (
<HeadTitleCell title={'你可能喜欢'}/>
);
}
case 'favorite': {
let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
// return (
// <BrandProductListCell
// style={[styles.listContainer, customStyle]}
// key={'row' + rowID}
// rowID={rowID}
// data={rowData}
// onPressProduct={this.props.onPressProductListProduct}
// />
// );
return null;
let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal*1.5 : rowMarginHorizontal*2;
let customStyle = {paddingLeft};
return (
<ProductListCell
style={[styles.listContainer, customStyle]}
key={'row' + rowID}
rowID={rowID}
data={rowData}
onPressProduct={this.props.onPressProductListProduct}
/>
);
}
break;
case 'lifeStyleFav': {
... ... @@ -296,11 +300,12 @@ export default class Home extends Component {
case 'shopRecommend':{
let data = this._currentChannelData();
return (
<ShopRecommend
<ShopRecommend
data={rowData.get('data')}
favoriteState={data.shop}
onPressShopRecommendItem={this.props.onPressShopRecommendItem}
onPressShopFavorite={this.props.onPressShopFavorite}
onPressShopFavorite={this.props.onPressShopFavorite}
onPressTitleMore={this.props.onPressTitleMore}
/>
)
}
... ... @@ -367,6 +372,18 @@ export default class Home extends Component {
);
}
_renderSectionHeader(sectionData, sectionID) {
let floor = [];
if (sectionID == 'floor') {
floor = sectionData;
}
if (sectionID == 'lifeStyleFav') {
}else {
return null
}
}
render() {
let channel = this.props.channel;
let data = this._currentChannelData();
... ... @@ -386,6 +403,7 @@ export default class Home extends Component {
let favoriteList = favorite.get('list');
dataSource = {
floor: floorList,
favoriteHeader: ['1'],
favorite: favoriteList.toArray()
}
}
... ... @@ -401,6 +419,8 @@ export default class Home extends Component {
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this._renderRow}
renderSectionHeader={this._renderSectionHeader}
removeClippedSubviews={true}
enableEmptySections={true}
enablePullToRefresh={true}
isOnPullToRefresh={isPullToRefresh}
... ... @@ -419,16 +439,16 @@ export default class Home extends Component {
let {width, height} = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;
let rowMarginHorizontal = Math.ceil((width - rowWidth * 2)/7);
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f0f0f0',
width: width,
backgroundColor: 'white',
},
contentContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
},
listContainer: {
width: width / 2,
... ...
... ... @@ -181,25 +181,25 @@ function loadLifeStyleChannelCache(data) {
function loadBoyCacheSuccess() {
return {
type: loadBoyCacheSuccess
type: LOAD_BOY_CACHE_SUCCESS
}
}
function loadGirlCacheSuccess() {
return {
type: loadGirlCacheSuccess
type: LOAD_GIRL_CACHE_SUCCESS
}
}
function loadKidsCacheSuccess() {
return {
type: loadKidsCacheSuccess
type: LOAD_KIDS_CACHE_SUCCESS
}
}
function loadLifeStyleCacheSuccess() {
return {
type: loadLifeStyleCacheSuccess
type: LOAD_LIFESTYLE_CACHE_SUCCESS
}
}
... ... @@ -723,13 +723,11 @@ function parseBottomBanner(json) {
}
function parseShopInfo(json) {
let payload = [];
let payload = {};
for (var i = 0; i < json.length; i++) {
let shop = {};
let shopItem = json[i];
let shopId = shopItem.id;
shop[shopId] = shopItem;
payload.push(shop);
payload[shopId] = shopItem;
}
return payload;
}
... ...
... ... @@ -19,7 +19,7 @@ let bottomBanner = Immutable.fromJS({
});
let shop = Immutable.fromJS({
list: List(),
list: Map(),
isFetching: false,
error: null
});
... ...
... ... @@ -313,13 +313,13 @@ export default function homeReducer(state=initialState, action) {
case LOAD_BOY_CACHE_SUCCESS:{
return state.setIn(['boy', 'isFetching'], false);
}
case LOAD_BOY_CACHE_SUCCESS:{
case LOAD_GIRL_CACHE_SUCCESS:{
return state.setIn(['girl', 'isFetching'], false);
}
case LOAD_BOY_CACHE_SUCCESS:{
case LOAD_KIDS_CACHE_SUCCESS:{
return state.setIn(['kid', 'isFetching'], false);
}
case LOAD_BOY_CACHE_SUCCESS:{
case LOAD_LIFESTYLE_CACHE_SUCCESS:{
return state.setIn(['lifeStyle', 'isFetching'], false);
}
... ...