mobile / YH_RNComponent · Commits

Go to a project

Authored by 于良
Commit 911dcb0c7262a1fb6d0882442ade804ca7bdcac3 1 parent d1054059

UI样式调整 review by chenlin

Inline Side-by-side
Showing 13 changed files with 74 additions and 50 deletions
... ... @@ -12,10 +12,10 @@ import ReactNative, {
TouchableOpacity,
} from 'react-native';
import SlicedImage from '../SlicedImage';
import Tags from './Tags';
import GPTags from './GPTags';
import DeleteLineText from '../DeleteLineText';
import YH_Image from '../YH_Image';
export default class ProductListCell extends Component {
... ... @@ -52,9 +52,8 @@ export default class ProductListCell extends Component {
}
_renderImages() {
let {data, sourceType} = this.props;
let url = data.get('default_images', '').replace('{width}', rowWidth).replace('{height}', imageHeight); // 商品缩略图
// url = SlicedImage.getSlicedUrl(data.get('default_images'), 290, 386, 2);
let {data, sourceType} = this.props;
let url = YH_Image.getSlicedUrl(data.get('default_images', ''), 290, 386, 2); // 商品缩略图
let isGlobalProduct = data.get('is_global') && data.get('is_global') == 'Y'; // 是否全球购商品
... ... @@ -68,12 +67,12 @@ export default class ProductListCell extends Component {
return (
<View style={styles.imageContainer}>
<Image style={styles.image} source={{uri: url}}>
<YH_Image style={styles.image} url={url}>
{showAlmostSoldOut ? <Image style={styles.almostSoldOutImage} source={require('../../images/tag/tip_jjsq.png')}/> : null}
{showOutletSoldOut ? <Image style={styles.soldOutImage} source={require('../../images/tag/outlet_sellout_bg.png')}/> : null}
{showGPSoldOut ? <Image style={styles.gpSoldOutImage} source={require('../../images/tag/gp_tip_SQ.png')}/> : null}
{showSoldOut ? <Image style={styles.almostSoldOutImage} source={require('../../images/tag/tip_ysq.png')}/> : null}
</Image>
</YH_Image>
</View>
);
}
... ...
... ... @@ -19,18 +19,21 @@ export default class HeadTitleCell extends Component{
}
render(){
render() {
let {title, moreUrl} = this.props;
return(
return (
<View style={styles.container}>
<Text style={styles.headerText}>{title}</Text>
{
(moreUrl && moreUrl != "") ?
<TouchableOpacity activeOpacity={1} style={styles.headerMoreContainer}
onPress={() => {this.props.onPressTitleMore && this.props.onPressTitleMore(moreUrl, 0)}}>
<Image source={require("../../images/head_title_more.png")}/>
<TouchableOpacity
activeOpacity={1}
style={styles.headerMoreContainer}
onPress={() => {this.props.onPressTitleMore && this.props.onPressTitleMore(moreUrl, 0)}}
>
<Image source={require("../../images/btn_more_n.png")}/>
</TouchableOpacity>
: null
}
... ... @@ -57,18 +60,17 @@ let styles = StyleSheet.create({
headerText:{
flex: 1,
fontSize: 14,
fontSize: 16,
color: '#444444',
textAlign: 'center',
fontWeight: 'bold',
},
headerMoreContainer:{
position: 'absolute',
top: 0,
right: 0,
width:40,
right: 10,
width: 40,
height: 40,
justifyContent: 'center',
alignItems: 'center',
... ...
... ... @@ -23,7 +23,7 @@ export default class ImageSlider extends React.Component {
this.dot = <View
style={{
backgroundColor:'#ededed',
backgroundColor:'rgba(237, 237, 237, 0.5)',
width: 5,
height: 5,
borderRadius: 2.5,
... ... @@ -94,7 +94,7 @@ export default class ImageSlider extends React.Component {
width={sliderWidth}
height={sliderHeight}
paginationStyle={{
backgroundColor: '#dadada',
backgroundColor: 'rgba(68, 68, 68, 0.2)',
bottom: 10,
height: 10,
width: data.length * 12,
... ...
... ... @@ -56,8 +56,6 @@ export default class Announcement extends React.Component {
autoplay={true}
autoplayTimeout={duration}
showsPagination={false}
dot={this.dot}
activeDot={this.activeDot}
height={containerHeight}
scrollEnabled={false}
>
... ...
... ... @@ -51,7 +51,7 @@ export default class AppHotBrands extends React.Component {
let url = YH_Image.getSlicedUrl(item.get('src'), width, imageHeight, 2);
return (
<TouchableOpacity key={i} style={styles.commonImage} onPress={() => {
<TouchableOpacity key={i} activeOpacity={1} style={styles.commonImage} onPress={() => {
this.props.onPressHotBrandItem && this.props.onPressHotBrandItem(item.get('url'), i);
}}>
<YH_Image url={url} style={styles.commonImage}/>
... ... @@ -59,7 +59,7 @@ export default class AppHotBrands extends React.Component {
)
})}
<TouchableOpacity style={styles.lastImage} onPress={() => {
<TouchableOpacity style={styles.lastImage} activeOpacity={1} onPress={() => {
this.props.onPressHotBrandItem && this.props.onPressHotBrandItem(image.get('url'), list.length - 1);
}}>
<YH_Image url={moreUrl} style={styles.lastImage}/>
... ...
... ... @@ -3,6 +3,7 @@
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../../common/components/YH_Image';
const {
AppRegistry,
... ... @@ -38,14 +39,16 @@ export default class AppIconList extends React.Component {
title = title&&title.length?title:'';
let cellStyle = styles.cell;
let imgStyle = styles.cellImg;
let titleStyle = styles.cellTitle;
if (this.props.number == '4') {
cellStyle = styles.cell4;
imgStyle = styles.cellImg4;
titleStyle = styles.cellTitle4;
}
return (
<TouchableOpacity style={cellStyle} onPress={()=>{this.props.onPressAppIconItem && this.props.onPressAppIconItem(url, rowID)}}>
<Image style={imgStyle} source={{uri:src}} resizeMode={'contain'}/>
<Text style={styles.cellTitle}>{title}</Text>
<TouchableOpacity activeOpacity={1} style={cellStyle} onPress={()=>{this.props.onPressAppIconItem && this.props.onPressAppIconItem(url, rowID)}}>
<YH_Image style={imgStyle} url={src} />
<Text style={titleStyle}>{title}</Text>
</TouchableOpacity>
);
}
... ... @@ -55,19 +58,20 @@ 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 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 containerHeight = (count == 4 ? 84 : 75) * lineNumber + padding * (lineNumber - 1) + 12;
let listContainerStyle = styles.brandContainer;
if (this.props.number == '4') {
listContainerStyle = styles.brandContainer4
}
return(
<Image style={[styles.container, {height: containerHeight}]} source={{uri:this.props.backImage}}>
<YH_Image style={[styles.container, {height: containerHeight}]} url={this.props.backImage}>
<ListView
contentContainerStyle={listContainerStyle}
enableEmptySections={true}
... ... @@ -77,7 +81,7 @@ export default class AppIconList extends React.Component {
scrollEnabled={false}
scrollsToTop={false}
/>
</Image>
</YH_Image>
);
return null;
}
... ... @@ -90,12 +94,10 @@ let padding4 = (width - 51*4)/10;
let styles = StyleSheet.create({
container: {
backgroundColor: '#f0f0f0',
backgroundColor: 'white',
},
brandContainer: {
backgroundColor: 'white',
borderColor: 'rgb(215, 215, 215)',
borderBottomWidth: 0.5,
flexDirection: 'row',
flexWrap: 'wrap',
width: width,
... ... @@ -157,4 +159,15 @@ let styles = StyleSheet.create({
height: 51,
},
cellTitle4: {
backgroundColor: 'white',
fontSize: 11,
fontWeight: 'bold',
color: '#444444',
textAlign: 'center',
marginTop: 6*width/320,
marginLeft: 0,
marginRight: 0,
},
});
... ...
... ... @@ -25,7 +25,7 @@ export default class DivideImage extends Component{
render(){
let data = this.props.data ;
let data = this.props.data;
let url = data && data.get(0,{}).get("src",'');
let imageUrl = SlicedImage.getSlicedUrl(url, width, height, 2);
... ... @@ -41,14 +41,14 @@ export default class DivideImage extends Component{
let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let height = Math.ceil(15 * DEVICE_WIDTH_RATIO);
let height = 15;
let styles = StyleSheet.create({
container: {
width: width,
height: height,
backgroundColor: "#e5e5e5",
backgroundColor: "#f0f0f0",
},
immage: {
... ...
... ... @@ -37,18 +37,25 @@ export default class PopularSingleProduct extends Component{
let goodsImageUrl = rowData.get('default_images');
goodsImageUrl = SlicedImage.getSlicedUrl(goodsImageUrl, goodsImageWidth, goodsImageHeight, 2);
let goodsPrice = "¥" + rowData.get('sales_price');
let goodsPrice = "¥" + parseFloat(rowData.get('sales_price', 0)).toFixed(2);
let goodsLookNum = rowData.get('sales_num') + "人";
return(
<TouchableOpacity activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(rowData.toJS())}>
return (
<TouchableOpacity
activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(rowData.toJS())}
>
<View style={styles.goodsContainer}>
<YH_Image style={styles.goodsImage} url={goodsImageUrl} />
<YH_Image
style={styles.goodsImage}
masksToBounds={true}
radius={{'topLeft':'2','topRight':'2','bottomRight':'2','bottomLeft':'2'}}
url={goodsImageUrl}
/>
<Text style={styles.goodsPrice} numberOfLines={1}>{goodsPrice}</Text>
<Text style={styles.goodsLookNum} numberOfLines={1}>{goodsLookNum}</Text>
<Text style={styles.goodsLookNum} numberOfLines={1}>正在浏览</Text>
<Text style={[styles.goodsLookNum, {marginTop: -5}]} numberOfLines={1}>正在浏览</Text>
</View>
</TouchableOpacity>
... ... @@ -98,8 +105,7 @@ const DEVICE_WIDTH_RATIO = width / 320;
let bannerHeight = Math.ceil(width * 234 / 750);
let goodsImageWidth = Math.ceil(90);
let goodsImageHeight = Math.ceil(120);
width = Math.ceil(width);
let containerHeight = 40 + bannerHeight + 202;
let containerHeight = 40 + bannerHeight + 192;
let styles = StyleSheet.create({
... ... @@ -127,28 +133,30 @@ let styles = StyleSheet.create({
width: 90,
height: 178,
marginLeft: 11,
borderRadius: 3,
backgroundColor: '#f0f0f0',
// backgroundColor: '#f0f0f0',
},
goodsImage: {
width: goodsImageWidth,
height: goodsImageHeight,
borderRadius: 2,
},
goodsPrice: {
width: goodsImageWidth,
height: 20,
fontSize: 12,
fontWeight: 'bold',
color: '#444444',
textAlign: 'center',
marginTop: 3,
marginTop: 5,
},
goodsLookNum: {
width: goodsImageWidth,
height: 15,
fontSize: 10,
fontSize: 9,
fontWeight: 'bold',
color: '#b0b0b0',
textAlign: 'center',
},
... ...
... ... @@ -24,7 +24,7 @@ export default class TrendgoodsTopic extends React.Component {
this.dot = <View
style={{
backgroundColor:'#ededed',
backgroundColor:'rgba(237, 237, 237, 0.5)',
width: 5,
height: 5,
borderRadius: 2.5,
... ... @@ -92,7 +92,7 @@ export default class TrendgoodsTopic extends React.Component {
width={sliderWidth}
height={sliderHeight}
paginationStyle={{
backgroundColor: '#dadada',
backgroundColor: 'rgba(68, 68, 68, 0.2)',
bottom: 50,
height: 10,
width: data.length * 12,
... ...
... ... @@ -171,6 +171,7 @@ export default class Home extends Component {
<AppHotBrands
data={rowData.get('data')}
onPressTitleMore={this.props.onPressTitleMore}
onPressHotBrandItem={this.props.onPressHotBrandItem}
/>
);
}
... ...
... ... @@ -227,9 +227,12 @@ class HomeContainer extends Component {
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
flex: 1,
width,
height: height - 64 - 49,
},
});
... ...