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 {
renderSectionHeader(sectionData, sectionID) {
switch(sectionID) {
// 顶部menu
case 'menu': {
// 顶部menu
case 'largeSlideImg_APP': {
return (
<Text>首页、上新、人气、全部商品</Text>
);
... ... @@ -71,47 +71,49 @@ export default class BrandStore extends Component {
}
renderRow(rowData, sectionID, rowID, highlightRow) {
switch(sectionID) {
case 'shopTopBanner_APP': {
return (
<BrandStoreHeaderView
backgroundImage={rowData}
info={this.props.info}
onPressCollection={this._onPressCollection}
onPressCollection={this.props.onPressCollection}
/>
);
}
break;
case 'largeSlideImg_APP': {
return(
<BrandSwiper
resource={rowData}
onPressBrandItem={this.props.onPressBrandItem}
/>
)
}
break;
case 'oneRowTwoColImages_APP': {
return (
<OneRowTwoColImages
resource={rowData}
onPressOneRowTwoColImages={this.props.onPressOneRowTwoColImages}
/>
);
}
break;
case 'recommend_APP': {
return (
<Recommend
resource={rowData}
onPressRecommendItem={this.props.onPressRecommendItem}
/>
);
}
break;
default:
return null;
}
if (rowData.get('resource_name') == 'shopTopBanner_APP') {
}else if (rowData.get('resource_name') == 'largeSlideImg_APP') {
return <BrandSwiper
src={rowData.get('resource_data')}
onPressBrandItem={this._onPressBrandItem}
/>;
}else if (rowData.get('resource_name') == 'oneRowTwoColImages_APP') {
return(
<OneRowTwoColImages
src={rowData.get('resource_data')}
onPressOneRowTwoColImages={this._onPressOneRowTwoColImages}
/>
);
}else if (rowData.get('resource_name') == 'recommend_APP') {
return(
<Recommend
src={rowData.get('resource_data')}
onPressOneRowTwoColImages={this._onPressOneRowTwoColImages}
/>
);
}
return null;
}
render() {
let {info, resource, coupon} = this.props;
let {
... ... @@ -141,10 +143,11 @@ export default class BrandStore extends Component {
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
/>
enableEmptySections = {true}
/>
);
}
}
let styles = StyleSheet.create({
... ...
... ... @@ -52,20 +52,26 @@ export default class BrandSwiper extends React.Component {
}
render() {
if (this.props.resource.size == 0) {
return null;
}
let width = this.state.width;
let height = this.state.height;
let data = JSON.parse(this.props.src);
let data = this.props.resource.toJS();
if (data.length == 1) {
return (
<TouchableOpacity
activeOpacity={1}
onPress={() => {
this.props.onPressBrandItem(data[0].url)
}}
>
<Image
source={{uri: data[i].src}}
source={{uri: data[0].src}}
style={{ width: width, height: height}}
resizeMode={'cover'}
></Image>
... ... @@ -86,17 +92,16 @@ export default class BrandSwiper extends React.Component {
height={height}
>
{data.map((item, i) => {
let ary = item.data;
return (
<TouchableOpacity
key={i}
activeOpacity={1}
onPress={() => {
this.props.onPressBrandItem(item.url)
}}
>
<Image
source={{uri:ary[0].src}}
source={{uri:item.src}}
style={{ width: width, height: height - 20}}
resizeMode={'cover'}
></Image>
... ...
... ... @@ -27,28 +27,23 @@ export default class OneRowTwoColImages extends React.Component {
render() {
let data = JSON.parse(this.props.src);
let data1 = data[0].data;
let imageSrc1 = data1[0].src;
let url1 = data1[0].url;
let data2 = data[1].data;
let imageSrc2 = data2[0].src;
let url2 = data1[0].url;
if (this.props.resource.size == 0) {
return null;
}
let data = this.props.resource.toJS();
return (
<View style={styles.viewStyle}>
<TouchableOpacity onPress={() => {this.props.onPress && this.props.onPressOneRowTwoColImages(url1)}} >
<TouchableOpacity onPress={() => {this.props.onPressOneRowTwoColImages(data[0].url)}} >
<Image
source={{uri: imageSrc1}}
source={{uri: data[0].src}}
style={styles.thumbnail}
resizeMode={'cover'}
></Image>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.props.onPress && this.props.onPressOneRowTwoColImages(url2)}} >
<TouchableOpacity onPress={() => {this.props.onPressOneRowTwoColImages(data[1].url)}} >
<Image
source={{uri: imageSrc2}}
source={{uri: data[1].src}}
style={styles.thumbnail}
resizeMode={'cover'}
></Image>
... ...
... ... @@ -27,46 +27,62 @@ export default class Recommend extends React.Component {
componentDidMount() {
}
_pressRow(rowData){
this.props.onPressRecommendItem(rowData.url)
}
renderRow(rowData,sectionID,rowID,highlightRow) {
return (
<View style={styles.thumbnail}>
<Image
source={{uri: rowData.src}}
style={styles.thumbnail}
resizeMode={'cover'}>
</Image>
<TouchableOpacity activeOpacity={0.5} onPress={() => this._pressRow(rowData)}>
<View style={styles.thumbnail}>
<Image
source={{uri: rowData.src}}
style={styles.thumbnail}
resizeMode={'cover'}>
<View style={styles.itemTitle}>
<Text style={styles.itemText}>{rowData.name}</Text>
</View>
</Image>
</View>
</TouchableOpacity>
);
}
renderHeader(){
let data = this.props.resource.toJS();
if (data === '') {
return null;
}
return(
<View style={styles.container}>
<View style={styles.title}>
<Text style={styles.text}>{data.title}</Text>
</View>
</View>
);
}
render() {
let data = JSON.parse(this.props.src);
let data = this.props.resource.toJS();
let list = data.list;
let backgroundWidth = Dimensions.get('window').width;
let backgroundHeight = 64 + 20 + Math.ceil(data.length/4) * Dimensions.get('window').width/4;
let backgroundHeight = 64 + 20 + Math.ceil(list.size/4) * Dimensions.get('window').width/4;
return (
<View style={{width: backgroundWidth,height:backgroundHeight,backgroundColor:'#f0f0f0'}}>
<ListView
automaticallyAdjustContentInsets={false}
contentContainerStyle={styles.grid}
dataSource={this.dataSource.cloneWithRows(data)}
dataSource={this.dataSource.cloneWithRows(list)}
renderRow={this.renderRow.bind(this)}
renderHeader = {this.renderHeader.bind(this)}
pageSize={Math.ceil(data.length/4)}
/>
</View>
);
}
renderHeader(){
return(
<View style={styles.container}>
<View style={styles.title}>
<Text style={styles.text}>热门品类</Text>
</View>
</View>
);
}
};
const styles = StyleSheet.create({
... ... @@ -74,10 +90,12 @@ const styles = StyleSheet.create({
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems:'flex-start'
alignItems:'flex-start',
},
thumbnail:{
borderWidth: 0.5,
borderColor: '#CCC',
height:Dimensions.get('window').width/4,
width:Dimensions.get('window').width/4,
},
... ... @@ -88,6 +106,19 @@ const styles = StyleSheet.create({
width:Dimensions.get('window').width,
backgroundColor:'white',
},
itemTitle:{
marginTop:Dimensions.get('window').width/4 - 30,
justifyContent: 'center',
height:30,
width:Dimensions.get('window').width/4,
backgroundColor:'transparent',
},
itemText: {
fontWeight: 'bold',
textAlign: 'center',
color: 'gray',
fontSize: 10,
},
text: {
fontWeight: 'bold',
textAlign: 'center',
... ...
... ... @@ -30,7 +30,9 @@ export default class BrandStoreHeaderView extends React.Component {
render() {
let {backgroundImage, info} = this.props;
if (backgroundImage === '') {
return null;
}
return (
<Image
source={{uri: backgroundImage}}
... ... @@ -38,10 +40,10 @@ export default class BrandStoreHeaderView extends React.Component {
resizeMode={'cover'}
>
<TouchableOpacity onPress={this.props.onPressCollection} >
<Image
source={require('../../../../image/5.png')}
style={{ width: this.state.buttonWidth, height: this.state.buttonHeight,position:'absolute',bottom:-this.state.backgroundHeight + 30,right:30}}
resizeMode={'cover'}/>
<Image
source={require('../../../../image/5.png')}
style={{ width: this.state.buttonWidth, height: this.state.buttonHeight,position:'absolute',bottom:-this.state.backgroundHeight + 30,right:30}}
resizeMode={'cover'}/>
</TouchableOpacity>
</Image>
);
... ...
'use strict'
import React, {Component} from 'react';
import {
import ReactNative, {
StyleSheet,
Platform,
InteractionManager,
... ... @@ -45,6 +45,7 @@ class BrandStoreContainer extends Component {
this._onPressCoupon = this._onPressCoupon.bind(this);
this._onPressBrandItem= this._onPressBrandItem.bind(this);
this._onPressOneRowTwoColImages= this._onPressOneRowTwoColImages.bind(this);
this._onPressRecommendItem= this._onPressRecommendItem.bind(this);
}
componentDidMount() {
... ... @@ -59,33 +60,48 @@ class BrandStoreContainer extends Component {
}
_onPressCollection(){
this.props.actions.onPressCollection();
alert("_onPressCollection");
// this.props.actions.onPressCollection();
}
_onPressCoupon(){
this.props.actions.onPressCoupon();
alert("_onPressCoupon");
// this.props.actions.onPressCoupon();
}
_onPressBrandItem(){
this.props.actions.onPressBrandItem();
_onPressBrandItem(url){
alert("_onPressBrandItem" + url);
// this.props.actions.onPressBrandItem();
}
_onPressOneRowTwoColImages(url){
this.props.actions.onPressOneRowTwoColImages(url);
alert("_onPressOneRowTwoColImages" + url);
// this.props.actions.onPressOneRowTwoColImages(url);
}
_onPressRecommendItem(url){
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
// this.props.actions._onPressRecommendItem(url);
}
render() {
let {info, resource, coupon} = this.props.brandStore;
console.log(this.props.brandStore);
return (
<BrandStore
info={info}
resource={resource}
coupon={coupon}
onPressCollection={this._onPressCollection}
onPressCoupon={this._onPressCoupon}
onPressBrandItem={this._onPressBrandItem}
onPressBrandItem={this._onPressBrandItem}
onPressOneRowTwoColImages={this._onPressOneRowTwoColImages}
onPressRecommendItem={this._onPressRecommendItem}
/>
);
}
... ...
... ... @@ -25,7 +25,7 @@ export function image(url, width, height, mode, quality) {
quality = quality || 90;
url += '/q/' + quality;
}
return url.replace('http:', '');
return url;
};
/**
... ... @@ -72,4 +72,4 @@ export function urlFormat(uri, qs, module, subDomain) {
}
return url;
};
\ No newline at end of file
};
... ...