mobile / YH_RNComponent · Commits

Go to a project

Authored by QC-L
Commit 577edaf01747adf6fd68a7767586ce443fcf737f 1 parent c53804ac

修复有赚首页滚动Bug review by sunkai

Inline Side-by-side
Showing 3 changed files with 40 additions and 45 deletions
1 'use strict'; 1 'use strict';
2 2
3 import React, {Component} from 'react'; 3 import React, {Component} from 'react';
4 -import {Dimensions, ListView, StyleSheet, Text, View, TouchableOpacity, Image} from 'react-native'; 4 +import {Dimensions, ListView, StyleSheet, Text, View, TouchableOpacity, Image, SectionList} from 'react-native';
5 5
6 import {Immutable, default as Immutables} from 'immutable'; 6 import {Immutable, default as Immutables} from 'immutable';
7 import GuideModal from "./GuideModal"; 7 import GuideModal from "./GuideModal";
@@ -34,8 +34,8 @@ export default class Home extends Component { @@ -34,8 +34,8 @@ export default class Home extends Component {
34 }); 34 });
35 } 35 }
36 36
37 - _renderSectionHeader(sectionData, sectionID) {  
38 - switch (sectionID) { 37 + _renderSectionHeader({ section: { title } }) {
  38 + switch (title) {
39 case 'categoryList': { 39 case 'categoryList': {
40 let { productList } = this.props.data; 40 let { productList } = this.props.data;
41 let selectedCategoryIndex = productList.selectedCategoryIndex; 41 let selectedCategoryIndex = productList.selectedCategoryIndex;
@@ -55,11 +55,14 @@ export default class Home extends Component { @@ -55,11 +55,14 @@ export default class Home extends Component {
55 } 55 }
56 } 56 }
57 57
58 - _renderRow(rowData, sectionID, rowID) { 58 + _renderRow(item) {
  59 + let rowID = item.index;
  60 + let rowData = item.item;
  61 +
59 let paddingLeft = rowID % 2 === 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal; 62 let paddingLeft = rowID % 2 === 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
60 let customStyle = rowID === 0 || rowID === 1 ? {paddingLeft} : {paddingLeft}; 63 let customStyle = rowID === 0 || rowID === 1 ? {paddingLeft} : {paddingLeft};
61 64
62 - switch (sectionID) { 65 + switch (item.section.title) {
63 case 'resourceList': { 66 case 'resourceList': {
64 return this._floorCellRender(rowData, rowID); 67 return this._floorCellRender(rowData, rowID);
65 } 68 }
@@ -75,7 +78,7 @@ export default class Home extends Component { @@ -75,7 +78,7 @@ export default class Home extends Component {
75 ) 78 )
76 } 79 }
77 80
78 - case 'productList': { 81 + case 'categoryList': {
79 return ( 82 return (
80 <ProductCell 83 <ProductCell
81 style={[styles.listContainer, customStyle]} 84 style={[styles.listContainer, customStyle]}
@@ -159,11 +162,10 @@ export default class Home extends Component { @@ -159,11 +162,10 @@ export default class Home extends Component {
159 } = this.props; 162 } = this.props;
160 163
161 164
162 - let dataSource = {  
163 - resourceList: resourceInfo.resourceList ? resourceInfo.resourceList.toArray() : [],  
164 - categoryList: data.productList.msort_list ? ['1'] : [],  
165 - productList: data.productList.product_list ? data.productList.product_list.toArray() : [],  
166 - }; 165 + let dataSource = [
  166 + {title: 'resourceList', data: resourceInfo.resourceList ? resourceInfo.resourceList.toArray() : []},
  167 + {title: 'categoryList', data: data.productList.product_list ? data.productList.product_list.toArray() : []},
  168 + ];
167 let productList = data.productList.product_list ? data.productList.product_list.toArray() : []; 169 let productList = data.productList.product_list ? data.productList.product_list.toArray() : [];
168 170
169 return ( 171 return (
@@ -171,16 +173,15 @@ export default class Home extends Component { @@ -171,16 +173,15 @@ export default class Home extends Component {
171 <GuideModal 173 <GuideModal
172 isShowGuide={this.props.isShowGuide} 174 isShowGuide={this.props.isShowGuide}
173 hiddenGuideDialog={this.props.hiddenGuideDialog}/> 175 hiddenGuideDialog={this.props.hiddenGuideDialog}/>
174 - <ListView 176 + <SectionList
175 ref={(c) => { 177 ref={(c) => {
176 this.listView = c; 178 this.listView = c;
177 }} 179 }}
  180 + sections={dataSource}
178 renderSectionHeader={this._renderSectionHeader} 181 renderSectionHeader={this._renderSectionHeader}
179 yh_viewVisible={true} 182 yh_viewVisible={true}
180 contentContainerStyle={styles.contentContainer} 183 contentContainerStyle={styles.contentContainer}
181 - enableEmptySections={true}  
182 - dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}  
183 - renderRow={this._renderRow} 184 + renderItem={this._renderRow}
184 onEndReached={() => { 185 onEndReached={() => {
185 if (productList && productList.size !== 0) { 186 if (productList && productList.size !== 0) {
186 this.props.onEndReached && this.props.onEndReached(); 187 this.props.onEndReached && this.props.onEndReached();
@@ -8,6 +8,7 @@ import Immutable from 'immutable'; @@ -8,6 +8,7 @@ import Immutable from 'immutable';
8 const { 8 const {
9 TouchableOpacity, 9 TouchableOpacity,
10 Dimensions, 10 Dimensions,
  11 + View
11 } = ReactNative; 12 } = ReactNative;
12 13
13 export default class ImageFour extends React.Component { 14 export default class ImageFour extends React.Component {
@@ -50,35 +51,28 @@ export default class ImageFour extends React.Component { @@ -50,35 +51,28 @@ export default class ImageFour extends React.Component {
50 let sliderWidth = width / 4; 51 let sliderWidth = width / 4;
51 let sliderHeight = 105 * DEVICE_WIDTH_RATIO; 52 let sliderHeight = 105 * DEVICE_WIDTH_RATIO;
52 return ( 53 return (
53 - list.map((item, i) => {  
54 - let imageUrl = YH_Image.getSlicedUrl(item.src, sliderWidth, sliderHeight, 2);  
55 - return (  
56 - <TouchableOpacity  
57 - key={i}  
58 - activeOpacity={1}  
59 - yh_exposureData={item.yh_exposureData}  
60 - style={{width: sliderWidth, height: sliderHeight}}  
61 - onPress={() => {  
62 - // if (i === 2) {  
63 - // this.props.jumpWithUrl && this.props.jumpWithUrl('达人排行', 'talentRank');  
64 - // } else {  
65 - this._handleParamsJumpWithUrl(i + 1, item.url);  
66 -  
67 - // }  
68 - // this.props.jumpWithUrl && this.props.jumpWithUrl('商品详情', 'shareDetail');  
69 - // let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.minealliance","params":{"favType":"0", "type":"recommendProduct", "title":"商品", "src":"http://img10.static.yhbimg.com/yhb-img01/2018/08/08/21/01479a3a579091b1c198d2884f3a80b08c.png?imageView2/{mode}/w/{width}/h/{height}", "productPool":"680" }}`;  
70 - // ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);  
71 -  
72 - // this.props.jumpWithUrl && this.props.jumpWithUrl('商品详情', 'recommendProduct');  
73 - }}  
74 - >  
75 - <YH_Image  
76 - url={imageUrl}  
77 - style={{width: sliderWidth, height: sliderHeight}}  
78 - />  
79 - </TouchableOpacity>  
80 - );  
81 - }) 54 + <View style={{flexDirection: 'row'}}>{
  55 + list.map((item, i) => {
  56 + let imageUrl = YH_Image.getSlicedUrl(item.src, sliderWidth, sliderHeight, 2);
  57 + return (
  58 + <TouchableOpacity
  59 + key={i}
  60 + activeOpacity={1}
  61 + yh_exposureData={item.yh_exposureData}
  62 + style={{ width: sliderWidth, height: sliderHeight }}
  63 + onPress={() => {
  64 + this._handleParamsJumpWithUrl(i + 1, item.url);
  65 + }}
  66 + >
  67 + <YH_Image
  68 + url={imageUrl}
  69 + style={{ width: sliderWidth, height: sliderHeight }}
  70 + />
  71 + </TouchableOpacity>
  72 + );
  73 + })
  74 + }
  75 + </View>
82 ); 76 );
83 } 77 }
84 } 78 }
@@ -40,7 +40,7 @@ export default class GroupProductCell extends React.Component { @@ -40,7 +40,7 @@ export default class GroupProductCell extends React.Component {
40 let activityId = resource.get('activityId'); 40 let activityId = resource.get('activityId');
41 let collagePrice = resource.get('collagePrice').toFixed(2); 41 let collagePrice = resource.get('collagePrice').toFixed(2);
42 let joinLimit = resource.get('joinLimit'); 42 let joinLimit = resource.get('joinLimit');
43 - console.log('.....: ', resource.toJS()); 43 +
44 return ( 44 return (
45 <View> 45 <View>
46 <TouchableOpacity activeOpacity={0.8} onPress={() => { 46 <TouchableOpacity activeOpacity={0.8} onPress={() => {