mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 70c48f7830f9907ef0dcec8f12af9b53691a7e61 1 parent e344539e

接数据 review by 红魔

Inline Side-by-side
Showing 7 changed files with 139 additions and 87 deletions
@@ -52,8 +52,8 @@ export default class BrandStore extends Component { @@ -52,8 +52,8 @@ export default class BrandStore extends Component {
52 52
53 renderSectionHeader(sectionData, sectionID) { 53 renderSectionHeader(sectionData, sectionID) {
54 switch(sectionID) { 54 switch(sectionID) {
55 - // 顶部menu  
56 - case 'menu': { 55 + // 顶部menu
  56 + case 'largeSlideImg_APP': {
57 return ( 57 return (
58 <Text>首页、上新、人气、全部商品</Text> 58 <Text>首页、上新、人气、全部商品</Text>
59 ); 59 );
@@ -71,47 +71,49 @@ export default class BrandStore extends Component { @@ -71,47 +71,49 @@ export default class BrandStore extends Component {
71 } 71 }
72 72
73 renderRow(rowData, sectionID, rowID, highlightRow) { 73 renderRow(rowData, sectionID, rowID, highlightRow) {
  74 +
74 switch(sectionID) { 75 switch(sectionID) {
75 case 'shopTopBanner_APP': { 76 case 'shopTopBanner_APP': {
76 return ( 77 return (
77 <BrandStoreHeaderView 78 <BrandStoreHeaderView
78 backgroundImage={rowData} 79 backgroundImage={rowData}
79 info={this.props.info} 80 info={this.props.info}
80 - onPressCollection={this._onPressCollection} 81 + onPressCollection={this.props.onPressCollection}
81 /> 82 />
82 ); 83 );
83 } 84 }
84 - 85 + break;
  86 + case 'largeSlideImg_APP': {
  87 + return(
  88 + <BrandSwiper
  89 + resource={rowData}
  90 + onPressBrandItem={this.props.onPressBrandItem}
  91 + />
  92 + )
  93 + }
  94 + break;
  95 + case 'oneRowTwoColImages_APP': {
  96 + return (
  97 + <OneRowTwoColImages
  98 + resource={rowData}
  99 + onPressOneRowTwoColImages={this.props.onPressOneRowTwoColImages}
  100 + />
  101 + );
  102 + }
  103 + break;
  104 + case 'recommend_APP': {
  105 + return (
  106 + <Recommend
  107 + resource={rowData}
  108 + onPressRecommendItem={this.props.onPressRecommendItem}
  109 + />
  110 + );
  111 + }
  112 + break;
85 default: 113 default:
86 return null; 114 return null;
87 } 115 }
88 -  
89 -  
90 - if (rowData.get('resource_name') == 'shopTopBanner_APP') {  
91 -  
92 - }else if (rowData.get('resource_name') == 'largeSlideImg_APP') {  
93 - return <BrandSwiper  
94 - src={rowData.get('resource_data')}  
95 - onPressBrandItem={this._onPressBrandItem}  
96 - />;  
97 - }else if (rowData.get('resource_name') == 'oneRowTwoColImages_APP') {  
98 - return(  
99 - <OneRowTwoColImages  
100 - src={rowData.get('resource_data')}  
101 - onPressOneRowTwoColImages={this._onPressOneRowTwoColImages}  
102 - />  
103 - );  
104 - }else if (rowData.get('resource_name') == 'recommend_APP') {  
105 - return(  
106 - <Recommend  
107 - src={rowData.get('resource_data')}  
108 - onPressOneRowTwoColImages={this._onPressOneRowTwoColImages}  
109 - />  
110 - );  
111 - }  
112 - return null;  
113 } 116 }
114 -  
115 render() { 117 render() {
116 let {info, resource, coupon} = this.props; 118 let {info, resource, coupon} = this.props;
117 let { 119 let {
@@ -141,10 +143,11 @@ export default class BrandStore extends Component { @@ -141,10 +143,11 @@ export default class BrandStore extends Component {
141 dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)} 143 dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
142 renderRow={this.renderRow} 144 renderRow={this.renderRow}
143 renderSectionHeader={this.renderSectionHeader} 145 renderSectionHeader={this.renderSectionHeader}
144 - /> 146 + enableEmptySections = {true}
  147 + />
145 ); 148 );
146 } 149 }
147 - 150 +
148 } 151 }
149 152
150 let styles = StyleSheet.create({ 153 let styles = StyleSheet.create({
@@ -52,20 +52,26 @@ export default class BrandSwiper extends React.Component { @@ -52,20 +52,26 @@ export default class BrandSwiper extends React.Component {
52 } 52 }
53 53
54 render() { 54 render() {
  55 +
  56 + if (this.props.resource.size == 0) {
  57 + return null;
  58 + }
  59 +
55 let width = this.state.width; 60 let width = this.state.width;
56 let height = this.state.height; 61 let height = this.state.height;
57 62
58 - let data = JSON.parse(this.props.src); 63 + let data = this.props.resource.toJS();
  64 +
59 if (data.length == 1) { 65 if (data.length == 1) {
60 return ( 66 return (
61 <TouchableOpacity 67 <TouchableOpacity
62 activeOpacity={1} 68 activeOpacity={1}
63 onPress={() => { 69 onPress={() => {
64 - 70 + this.props.onPressBrandItem(data[0].url)
65 }} 71 }}
66 > 72 >
67 <Image 73 <Image
68 - source={{uri: data[i].src}} 74 + source={{uri: data[0].src}}
69 style={{ width: width, height: height}} 75 style={{ width: width, height: height}}
70 resizeMode={'cover'} 76 resizeMode={'cover'}
71 ></Image> 77 ></Image>
@@ -86,17 +92,16 @@ export default class BrandSwiper extends React.Component { @@ -86,17 +92,16 @@ export default class BrandSwiper extends React.Component {
86 height={height} 92 height={height}
87 > 93 >
88 {data.map((item, i) => { 94 {data.map((item, i) => {
89 - let ary = item.data;  
90 return ( 95 return (
91 <TouchableOpacity 96 <TouchableOpacity
92 key={i} 97 key={i}
93 activeOpacity={1} 98 activeOpacity={1}
94 onPress={() => { 99 onPress={() => {
95 - 100 + this.props.onPressBrandItem(item.url)
96 }} 101 }}
97 > 102 >
98 <Image 103 <Image
99 - source={{uri:ary[0].src}} 104 + source={{uri:item.src}}
100 style={{ width: width, height: height - 20}} 105 style={{ width: width, height: height - 20}}
101 resizeMode={'cover'} 106 resizeMode={'cover'}
102 ></Image> 107 ></Image>
@@ -27,28 +27,23 @@ export default class OneRowTwoColImages extends React.Component { @@ -27,28 +27,23 @@ export default class OneRowTwoColImages extends React.Component {
27 27
28 render() { 28 render() {
29 29
30 - let data = JSON.parse(this.props.src);  
31 - let data1 = data[0].data;  
32 - let imageSrc1 = data1[0].src;  
33 - let url1 = data1[0].url;  
34 -  
35 - let data2 = data[1].data;  
36 - let imageSrc2 = data2[0].src;  
37 - let url2 = data1[0].url;  
38 - 30 + if (this.props.resource.size == 0) {
  31 + return null;
  32 + }
  33 + let data = this.props.resource.toJS();
39 return ( 34 return (
40 <View style={styles.viewStyle}> 35 <View style={styles.viewStyle}>
41 - <TouchableOpacity onPress={() => {this.props.onPress && this.props.onPressOneRowTwoColImages(url1)}} > 36 + <TouchableOpacity onPress={() => {this.props.onPressOneRowTwoColImages(data[0].url)}} >
42 <Image 37 <Image
43 - source={{uri: imageSrc1}} 38 + source={{uri: data[0].src}}
44 style={styles.thumbnail} 39 style={styles.thumbnail}
45 resizeMode={'cover'} 40 resizeMode={'cover'}
46 ></Image> 41 ></Image>
47 </TouchableOpacity> 42 </TouchableOpacity>
48 43
49 - <TouchableOpacity onPress={() => {this.props.onPress && this.props.onPressOneRowTwoColImages(url2)}} > 44 + <TouchableOpacity onPress={() => {this.props.onPressOneRowTwoColImages(data[1].url)}} >
50 <Image 45 <Image
51 - source={{uri: imageSrc2}} 46 + source={{uri: data[1].src}}
52 style={styles.thumbnail} 47 style={styles.thumbnail}
53 resizeMode={'cover'} 48 resizeMode={'cover'}
54 ></Image> 49 ></Image>
@@ -27,46 +27,62 @@ export default class Recommend extends React.Component { @@ -27,46 +27,62 @@ export default class Recommend extends React.Component {
27 componentDidMount() { 27 componentDidMount() {
28 } 28 }
29 29
  30 + _pressRow(rowData){
  31 + this.props.onPressRecommendItem(rowData.url)
  32 + }
  33 +
30 renderRow(rowData,sectionID,rowID,highlightRow) { 34 renderRow(rowData,sectionID,rowID,highlightRow) {
31 return ( 35 return (
32 - <View style={styles.thumbnail}>  
33 - <Image  
34 - source={{uri: rowData.src}}  
35 - style={styles.thumbnail}  
36 - resizeMode={'cover'}>  
37 - </Image> 36 + <TouchableOpacity activeOpacity={0.5} onPress={() => this._pressRow(rowData)}>
  37 + <View style={styles.thumbnail}>
  38 + <Image
  39 + source={{uri: rowData.src}}
  40 + style={styles.thumbnail}
  41 + resizeMode={'cover'}>
  42 +
  43 + <View style={styles.itemTitle}>
  44 + <Text style={styles.itemText}>{rowData.name}</Text>
  45 + </View>
  46 + </Image>
  47 + </View>
  48 + </TouchableOpacity>
  49 +
  50 + );
  51 + }
  52 +
  53 + renderHeader(){
  54 + let data = this.props.resource.toJS();
  55 + if (data === '') {
  56 + return null;
  57 + }
  58 + return(
  59 + <View style={styles.container}>
  60 + <View style={styles.title}>
  61 + <Text style={styles.text}>{data.title}</Text>
  62 + </View>
38 </View> 63 </View>
39 ); 64 );
40 } 65 }
41 66
42 render() { 67 render() {
43 - let data = JSON.parse(this.props.src); 68 + let data = this.props.resource.toJS();
  69 + let list = data.list;
44 let backgroundWidth = Dimensions.get('window').width; 70 let backgroundWidth = Dimensions.get('window').width;
45 - let backgroundHeight = 64 + 20 + Math.ceil(data.length/4) * Dimensions.get('window').width/4; 71 + let backgroundHeight = 64 + 20 + Math.ceil(list.size/4) * Dimensions.get('window').width/4;
46 72
47 return ( 73 return (
48 <View style={{width: backgroundWidth,height:backgroundHeight,backgroundColor:'#f0f0f0'}}> 74 <View style={{width: backgroundWidth,height:backgroundHeight,backgroundColor:'#f0f0f0'}}>
49 <ListView 75 <ListView
50 automaticallyAdjustContentInsets={false} 76 automaticallyAdjustContentInsets={false}
51 contentContainerStyle={styles.grid} 77 contentContainerStyle={styles.grid}
52 - dataSource={this.dataSource.cloneWithRows(data)} 78 + dataSource={this.dataSource.cloneWithRows(list)}
53 renderRow={this.renderRow.bind(this)} 79 renderRow={this.renderRow.bind(this)}
54 renderHeader = {this.renderHeader.bind(this)} 80 renderHeader = {this.renderHeader.bind(this)}
  81 + pageSize={Math.ceil(data.length/4)}
55 /> 82 />
56 </View> 83 </View>
57 ); 84 );
58 } 85 }
59 -  
60 - renderHeader(){  
61 - return(  
62 - <View style={styles.container}>  
63 - <View style={styles.title}>  
64 - <Text style={styles.text}>热门品类</Text>  
65 - </View>  
66 - </View>  
67 - );  
68 - }  
69 -  
70 }; 86 };
71 87
72 const styles = StyleSheet.create({ 88 const styles = StyleSheet.create({
@@ -74,10 +90,12 @@ const styles = StyleSheet.create({ @@ -74,10 +90,12 @@ const styles = StyleSheet.create({
74 flex: 1, 90 flex: 1,
75 flexDirection: 'row', 91 flexDirection: 'row',
76 flexWrap: 'wrap', 92 flexWrap: 'wrap',
77 - alignItems:'flex-start' 93 + alignItems:'flex-start',
78 }, 94 },
79 95
80 thumbnail:{ 96 thumbnail:{
  97 + borderWidth: 0.5,
  98 + borderColor: '#CCC',
81 height:Dimensions.get('window').width/4, 99 height:Dimensions.get('window').width/4,
82 width:Dimensions.get('window').width/4, 100 width:Dimensions.get('window').width/4,
83 }, 101 },
@@ -88,6 +106,19 @@ const styles = StyleSheet.create({ @@ -88,6 +106,19 @@ const styles = StyleSheet.create({
88 width:Dimensions.get('window').width, 106 width:Dimensions.get('window').width,
89 backgroundColor:'white', 107 backgroundColor:'white',
90 }, 108 },
  109 + itemTitle:{
  110 + marginTop:Dimensions.get('window').width/4 - 30,
  111 + justifyContent: 'center',
  112 + height:30,
  113 + width:Dimensions.get('window').width/4,
  114 + backgroundColor:'transparent',
  115 + },
  116 + itemText: {
  117 + fontWeight: 'bold',
  118 + textAlign: 'center',
  119 + color: 'gray',
  120 + fontSize: 10,
  121 + },
91 text: { 122 text: {
92 fontWeight: 'bold', 123 fontWeight: 'bold',
93 textAlign: 'center', 124 textAlign: 'center',
@@ -30,7 +30,9 @@ export default class BrandStoreHeaderView extends React.Component { @@ -30,7 +30,9 @@ export default class BrandStoreHeaderView extends React.Component {
30 30
31 render() { 31 render() {
32 let {backgroundImage, info} = this.props; 32 let {backgroundImage, info} = this.props;
33 - 33 + if (backgroundImage === '') {
  34 + return null;
  35 + }
34 return ( 36 return (
35 <Image 37 <Image
36 source={{uri: backgroundImage}} 38 source={{uri: backgroundImage}}
@@ -38,10 +40,10 @@ export default class BrandStoreHeaderView extends React.Component { @@ -38,10 +40,10 @@ export default class BrandStoreHeaderView extends React.Component {
38 resizeMode={'cover'} 40 resizeMode={'cover'}
39 > 41 >
40 <TouchableOpacity onPress={this.props.onPressCollection} > 42 <TouchableOpacity onPress={this.props.onPressCollection} >
41 - <Image  
42 - source={require('../../../../image/5.png')}  
43 - style={{ width: this.state.buttonWidth, height: this.state.buttonHeight,position:'absolute',bottom:-this.state.backgroundHeight + 30,right:30}}  
44 - resizeMode={'cover'}/> 43 + <Image
  44 + source={require('../../../../image/5.png')}
  45 + style={{ width: this.state.buttonWidth, height: this.state.buttonHeight,position:'absolute',bottom:-this.state.backgroundHeight + 30,right:30}}
  46 + resizeMode={'cover'}/>
45 </TouchableOpacity> 47 </TouchableOpacity>
46 </Image> 48 </Image>
47 ); 49 );
1 'use strict' 1 'use strict'
2 2
3 import React, {Component} from 'react'; 3 import React, {Component} from 'react';
4 -import { 4 +import ReactNative, {
5 StyleSheet, 5 StyleSheet,
6 Platform, 6 Platform,
7 InteractionManager, 7 InteractionManager,
@@ -45,6 +45,7 @@ class BrandStoreContainer extends Component { @@ -45,6 +45,7 @@ class BrandStoreContainer extends Component {
45 this._onPressCoupon = this._onPressCoupon.bind(this); 45 this._onPressCoupon = this._onPressCoupon.bind(this);
46 this._onPressBrandItem= this._onPressBrandItem.bind(this); 46 this._onPressBrandItem= this._onPressBrandItem.bind(this);
47 this._onPressOneRowTwoColImages= this._onPressOneRowTwoColImages.bind(this); 47 this._onPressOneRowTwoColImages= this._onPressOneRowTwoColImages.bind(this);
  48 + this._onPressRecommendItem= this._onPressRecommendItem.bind(this);
48 } 49 }
49 50
50 componentDidMount() { 51 componentDidMount() {
@@ -59,33 +60,48 @@ class BrandStoreContainer extends Component { @@ -59,33 +60,48 @@ class BrandStoreContainer extends Component {
59 } 60 }
60 61
61 _onPressCollection(){ 62 _onPressCollection(){
62 - this.props.actions.onPressCollection(); 63 + alert("_onPressCollection");
  64 +
  65 + // this.props.actions.onPressCollection();
63 } 66 }
64 67
65 _onPressCoupon(){ 68 _onPressCoupon(){
66 - this.props.actions.onPressCoupon(); 69 + alert("_onPressCoupon");
  70 +
  71 + // this.props.actions.onPressCoupon();
67 } 72 }
68 73
69 - _onPressBrandItem(){  
70 - this.props.actions.onPressBrandItem(); 74 + _onPressBrandItem(url){
  75 + alert("_onPressBrandItem" + url);
  76 +
  77 + // this.props.actions.onPressBrandItem();
71 } 78 }
72 79
73 _onPressOneRowTwoColImages(url){ 80 _onPressOneRowTwoColImages(url){
74 - this.props.actions.onPressOneRowTwoColImages(url); 81 + alert("_onPressOneRowTwoColImages" + url);
  82 +
  83 + // this.props.actions.onPressOneRowTwoColImages(url);
  84 + }
  85 +
  86 + _onPressRecommendItem(url){
  87 + ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
  88 + // this.props.actions._onPressRecommendItem(url);
75 } 89 }
76 90
77 render() { 91 render() {
78 92
79 let {info, resource, coupon} = this.props.brandStore; 93 let {info, resource, coupon} = this.props.brandStore;
80 - 94 + console.log(this.props.brandStore);
81 return ( 95 return (
82 <BrandStore 96 <BrandStore
83 info={info} 97 info={info}
84 resource={resource} 98 resource={resource}
85 coupon={coupon} 99 coupon={coupon}
  100 + onPressCollection={this._onPressCollection}
86 onPressCoupon={this._onPressCoupon} 101 onPressCoupon={this._onPressCoupon}
87 onPressBrandItem={this._onPressBrandItem} 102 onPressBrandItem={this._onPressBrandItem}
88 - onPressBrandItem={this._onPressBrandItem} 103 + onPressOneRowTwoColImages={this._onPressOneRowTwoColImages}
  104 + onPressRecommendItem={this._onPressRecommendItem}
89 /> 105 />
90 ); 106 );
91 } 107 }
@@ -25,7 +25,7 @@ export function image(url, width, height, mode, quality) { @@ -25,7 +25,7 @@ export function image(url, width, height, mode, quality) {
25 quality = quality || 90; 25 quality = quality || 90;
26 url += '/q/' + quality; 26 url += '/q/' + quality;
27 } 27 }
28 - return url.replace('http:', ''); 28 + return url;
29 }; 29 };
30 30
31 /** 31 /**
@@ -72,4 +72,4 @@ export function urlFormat(uri, qs, module, subDomain) { @@ -72,4 +72,4 @@ export function urlFormat(uri, qs, module, subDomain) {
72 } 72 }
73 73
74 return url; 74 return url;
75 -};  
  75 +};