mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 808d25db3c2dd8d90ddb7332525362e23b44ee76 1 parent 8cd4859f

添加点击事件 review by hongmo

Inline Side-by-side
Showing 7 changed files with 106 additions and 81 deletions
... ... @@ -49,6 +49,7 @@ export default class DoubleImage extends React.Component {
let price1 = '¥' + salePrice1.toFixed(2);
let sale1 = '¥' + originPrice1.toFixed(2);
let saleAble1 = salePrice1>0?true:false;
let linkReource1 = data1.resource;
let data2 = list?list[1]:null;
let backgroundImage2 = data2.pic;
... ... @@ -60,10 +61,11 @@ export default class DoubleImage extends React.Component {
let price2 = '¥' + salePrice2.toFixed(2);
let sale2 = '¥' + originPrice2.toFixed(2);
let saleAble2 = salePrice2>0?true:false;
let linkReource2 = data2.resource;
return(
<View style={{flexDirection: 'row',width: width,height: backgroundHeight,backgroundColor: 'white',}}>
<TouchableOpacity onPress={() => {this.props.onPressProduct && this.props.onPressProduct('url')}} >
<TouchableOpacity onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType1,linkReource1)}} >
<Image
source={{uri: backgroundImage1}}
style={styles.thumbnail}
... ... @@ -77,7 +79,7 @@ export default class DoubleImage extends React.Component {
</View>:null}
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.props.onPressProduct && this.props.onPressProduct('url')}} >
<TouchableOpacity onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType2,linkReource2)}} >
<Image
source={{uri: backgroundImage2}}
style={styles.thumbnail}
... ...
... ... @@ -106,7 +106,7 @@ export default class RedBrand extends Component {
if (rowData.get('module_type') == 'CarouselImage') {
return(<RedBrandSwiper resource={rowData} onPressSlideItem={this.props.onPressProduct}/>);
}else if (rowData.get('module_type') == 'Title') {
return(<Title resource={rowData} onPressMore={this.props.onPressMore}/>);
return(<Title resource={rowData} onPressProduct={this.props.onPressProduct}/>);
}else if (rowData.get('module_type') == 'SingleImage') {
return(<SingleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
}else if (rowData.get('module_type') == 'DoubleImage') {
... ...
... ... @@ -70,7 +70,7 @@ export default class RedBrandSwiper extends React.Component {
activeOpacity={1}
style={{width: width, height: swiperHeight}}
onPress={() => {
this.props.onPressSlideItem && this.props.onPressSlideItem(data[0].url);
this.props.onPressSlideItem && this.props.onPressSlideItem(data[0].linkType,data[0].resource);
}}
>
<Image
... ... @@ -99,7 +99,7 @@ export default class RedBrandSwiper extends React.Component {
key={i}
activeOpacity={1}
onPress={() => {
this.props.onPressSlideItem && this.props.onPressSlideItem(item.url);
this.props.onPressSlideItem && this.props.onPressSlideItem(item.linkType,item.resource);
}}
>
<Image
... ...
... ... @@ -52,10 +52,11 @@ export default class SingleImage extends React.Component {
let price = '¥' + salePrice.toFixed(2);
let sale = '¥' + originPrice.toFixed(2);
let saleAble = salePrice>0?true:false;
let linkReource = data.resource;
return (
<TouchableOpacity activeOpacity={0.5} style={{width: backgroundWidth, height:backgroundHeight,backgroundColor: 'white'}} onPress={() => {
this.props.onPressProduct && this.props.onPressProduct('url');
this.props.onPressProduct && this.props.onPressProduct(linkType,linkReource);
}}>
<View style={{width: backgroundWidth, height:backgroundHeight,backgroundColor: 'white'}}>
<Image
... ...
... ... @@ -48,6 +48,7 @@ export default class Title extends React.Component {
let list = resource.get('module_data').get('data').toJS();
let data = list?list[0]:null;
let linkType = data.linkType;
let linkReource = data.resource;
let title = data.text;
let hasMoreButton = linkType==''?false:true;
... ... @@ -58,7 +59,7 @@ export default class Title extends React.Component {
<Text style={[styles.text, fontFamilyStyle]}>{title}</Text>
{hasMoreButton?
<TouchableOpacity activeOpacity={0.5} style={styles.thumbnail} onPress={() => {
this.props.onPressMore && this.props.onPressMore('url');
this.props.onPressProduct && this.props.onPressProduct(linkType,linkReource);
}}>
<Image
source={require('../../../brandStore/image/btn_more_p.png')}
... ...
import React, {Component } from 'react'
import { Image ,View, StyleSheet, Text, Dimensions} from 'react-native';
import { Image ,View, StyleSheet, Text, Dimensions,TouchableOpacity} from 'react-native';
import Immutable, {Map} from 'immutable';
export default class RedPersonPicThree extends Component{
... ... @@ -37,6 +37,7 @@ export default class RedPersonPicThree extends Component{
let price1 = '¥' + salePrice1.toFixed(2);
let sale1 = '¥' + originPrice1.toFixed(2);
let saleAble1 = salePrice1>0?true:false;
let linkReource1 = data1.resource;
let data2 = list?list[1]:null;
let backgroundImage2 = data2.pic;
... ... @@ -48,6 +49,7 @@ export default class RedPersonPicThree extends Component{
let price2 = '¥' + salePrice2.toFixed(2);
let sale2 = '¥' + originPrice2.toFixed(2);
let saleAble2 = salePrice2>0?true:false;
let linkReource2 = data2.resource;
let data3 = list?list[2]:null;
let backgroundImage3 = data3.pic;
... ... @@ -59,50 +61,63 @@ export default class RedPersonPicThree extends Component{
let price3 = '¥' + salePrice3.toFixed(2);
let sale3 = '¥' + originPrice3.toFixed(2);
let saleAble3 = salePrice3>0?true:false;
let linkReource3 = data3.resource;
switch (displayType) {
case '1':
return (
<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth4+nullHeigth:containerHeigth4,backgroundColor: 'white'}}>
<Image source={{uri: backgroundImage1}} style={styles.imagetype4}>
{saleAble1?<View style={styles.maskContainer4}>
<Text numberOfLines={1} style={styles.titleText4}>{name1}</Text>
<Text style={styles.price4}>{price1}</Text>
</View>:null}
</Image>
<Image source={{uri: backgroundImage2}} style={styles.imagetype4}>
{saleAble2?<View style={styles.maskContainer4}>
<Text numberOfLines={1} style={styles.titleText4}>{name2}</Text>
<Text style={styles.price4}>{price2}</Text>
</View>:null}
</Image>
<Image source={{uri: backgroundImage3}} style={styles.imagetype4}>
{saleAble3?<View style={styles.maskContainer4}>
<Text numberOfLines={1} style={styles.titleText4}>{name3}</Text>
<Text style={styles.price4}>{price3}</Text>
</View>:null}
</Image>
<TouchableOpacity style={styles.imagetype4} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType1,linkReource1)}} >
<Image source={{uri: backgroundImage1}} style={styles.imagetype4}>
{saleAble1?<View style={styles.maskContainer4}>
<Text numberOfLines={1} style={styles.titleText4}>{name1}</Text>
<Text style={styles.price4}>{price1}</Text>
</View>:null}
</Image>
</TouchableOpacity>
<TouchableOpacity style={styles.imagetype4} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType2,linkReource2)}} >
<Image source={{uri: backgroundImage2}} style={styles.imagetype4}>
{saleAble2?<View style={styles.maskContainer4}>
<Text numberOfLines={1} style={styles.titleText4}>{name2}</Text>
<Text style={styles.price4}>{price2}</Text>
</View>:null}
</Image>
</TouchableOpacity>
<TouchableOpacity style={styles.imagetype4} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType3,linkReource3)}} >
<Image source={{uri: backgroundImage3}} style={styles.imagetype4}>
{saleAble3?<View style={styles.maskContainer4}>
<Text numberOfLines={1} style={styles.titleText4}>{name3}</Text>
<Text style={styles.price4}>{price3}</Text>
</View>:null}
</Image>
</TouchableOpacity>
</View>
)
break;
case '2':
return (
<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth3+nullHeigth:containerHeigth3,backgroundColor: 'white'}}>
<Image source={{uri: backgroundImage1}} style={styles.imagetype3}>
{saleAble1?<View style={styles.maskContainer3}>
<Text style={styles.price3}>{price1}</Text>
</View>:null}
</Image>
<Image source={{uri: backgroundImage2}} style={styles.imagetype3}>
{saleAble2?<View style={styles.maskContainer3}>
<Text style={styles.price3}>{price2}</Text>
</View>:null}
</Image>
<Image source={{uri: backgroundImage3}} style={styles.imagetype3}>
{saleAble3?<View style={styles.maskContainer3}>
<Text style={styles.price3}>{price3}</Text>
</View>:null}
</Image>
<TouchableOpacity style={styles.imagetype3} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType1,linkReource1)}} >
<Image source={{uri: backgroundImage1}} style={styles.imagetype3}>
{saleAble1?<View style={styles.maskContainer3}>
<Text style={styles.price3}>{price1}</Text>
</View>:null}
</Image>
</TouchableOpacity>
<TouchableOpacity style={styles.imagetype3} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType2,linkReource2)}} >
<Image source={{uri: backgroundImage2}} style={styles.imagetype3}>
{saleAble2?<View style={styles.maskContainer3}>
<Text style={styles.price3}>{price2}</Text>
</View>:null}
</Image>
</TouchableOpacity>
<TouchableOpacity style={styles.imagetype3} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType3,linkReource3)}} >
<Image source={{uri: backgroundImage3}} style={styles.imagetype3}>
{saleAble3?<View style={styles.maskContainer3}>
<Text style={styles.price3}>{price3}</Text>
</View>:null}
</Image>
</TouchableOpacity>
</View>
)
break;
... ... @@ -110,53 +125,64 @@ export default class RedPersonPicThree extends Component{
return (
<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth,backgroundColor: 'white'}}>
<View style={styles.subContainer}>
<Image source={{uri: backgroundImage1}} style={styles.image}>
{saleAble1?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name1}</Text>
<Text style={styles.price}>{price1}</Text>
</View>:null}
</Image>
<Image source={{uri: backgroundImage2}} style={styles.image}>
{saleAble2?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name2}</Text>
<Text style={styles.price}>{price2}</Text>
<TouchableOpacity style={styles.image} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType1,linkReource1)}} >
<Image source={{uri: backgroundImage1}} style={styles.image}>
{saleAble1?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name1}</Text>
<Text style={styles.price}>{price1}</Text>
</View>:null}
</Image>
</TouchableOpacity>
<TouchableOpacity style={styles.image} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType2,linkReource2)}} >
<Image source={{uri: backgroundImage2}} style={styles.image}>
{saleAble2?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name2}</Text>
<Text style={styles.price}>{price2}</Text>
</View>:null}
</Image>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.imageBig} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType3,linkReource3)}} >
<Image source={{uri: backgroundImage3}} style={styles.imageBig}>
{saleAble3?<View style={styles.maskContainer2}>
<Text numberOfLines={2} style={styles.titleText}>{name3}</Text>
<Text style={styles.price}>{price3}</Text>
</View>:null}
</Image>
</View>
<Image source={{uri: backgroundImage3}} style={styles.imageBig}>
{saleAble3?<View style={styles.maskContainer2}>
<Text numberOfLines={2} style={styles.titleText}>{name3}</Text>
<Text style={styles.price}>{price3}</Text>
</View>:null}
</Image>
</TouchableOpacity>
</View>
)
break;
case '4':
return (
<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth,backgroundColor: 'white'}}>
<TouchableOpacity onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType1,linkReource1)}} >
<View style={styles.subContainer}>
<Image source={{uri: backgroundImage1}} style={styles.imageBig}>
{saleAble1?<View style={styles.maskContainer2}>
<Text numberOfLines={2} style={styles.titleText}>{name1}</Text>
<Text style={styles.price}>{price1}</Text>
</View>:null}
</Image>
</View>
</TouchableOpacity>
<View style={styles.subContainer}>
<Image source={{uri: backgroundImage1}} style={styles.imageBig}>
{saleAble1?<View style={styles.maskContainer2}>
<Text numberOfLines={2} style={styles.titleText}>{name1}</Text>
<Text style={styles.price}>{price1}</Text>
</View>:null}
</Image>
</View>
<View style={styles.subContainer}>
<Image source={{uri: backgroundImage2}} style={styles.image}>
{saleAble2?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name2}</Text>
<Text style={styles.price}>{price2}</Text>
</View>:null}
</Image>
<TouchableOpacity style={styles.image} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType2,linkReource2)}} >
<Image source={{uri: backgroundImage2}} style={styles.image}>
{saleAble2?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name2}</Text>
<Text style={styles.price}>{price2}</Text>
</View>:null}
</Image>
</TouchableOpacity>
<TouchableOpacity style={styles.image} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType3,linkReource3)}} >
<Image source={{uri: backgroundImage3}} style={styles.image}>
{saleAble3?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name3}</Text>
<Text style={styles.price}>{price3}</Text>
</View>:null}
</Image>
</TouchableOpacity>
</View>
</View>
)
... ...
... ... @@ -42,7 +42,6 @@ class RedPersonBrandContainer extends Component {
super(props);
this._onPressStoreFilter = this._onPressStoreFilter.bind(this);
this._onPressLaunchProfile = this._onPressLaunchProfile.bind(this);
this._onPressMore = this._onPressMore.bind(this);
this._onPressVideo = this._onPressVideo.bind(this);
this._onPressProduct = this._onPressProduct.bind(this);
this._onPressProductFilter = this._onPressProductFilter.bind(this);
... ... @@ -85,16 +84,13 @@ class RedPersonBrandContainer extends Component {
this.props.actions.setFilter(value);
}
_onPressMore(url){
console.log(url);
}
_onPressVideo(url){
console.log(url);
}
_onPressProduct(url){
console.log(url);
_onPressProduct(linkType,linkReource){
console.log(linkType);
console.log(linkReource);
}
_onPressProductFilter(value) {
... ... @@ -182,7 +178,6 @@ class RedPersonBrandContainer extends Component {
shopsdecorator={shopsdecorator}
onPressLaunchProfile={this._onPressLaunchProfile}
onPressStoreFilter={this._onPressStoreFilter}
onPressMore={this._onPressMore}
onPressVideo={this._onPressVideo}
onPressProduct={this._onPressProduct}
onEndReached={this._onEndReached}
... ...