mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit deb959335344c237860271fd6a5e820a9cf1b7c9 1 parent fdbc1f9d

整理代码 review by 张丽霞

Inline Side-by-side
Showing 4 changed files with 136 additions and 33 deletions
... ... @@ -12,6 +12,7 @@ const {
ListView,
Dimensions,
TouchableOpacity,
PixelRatio,
} = ReactNative;
export default class BannerReourceList extends React.Component {
... ... @@ -22,15 +23,31 @@ export default class BannerReourceList extends React.Component {
});
}
static getSlicedUrl(src, width, height, mode = 1) {
if (!src) {
return '';
}
width = PixelRatio.getPixelSizeForLayoutSize(width);
height = PixelRatio.getPixelSizeForLayoutSize(height);
let newSrc = src;
if (src.indexOf('imageView') === -1 && src.indexOf('imageMogr') === -1) {
newSrc = src + '?imageView2/' + mode + '/w/' + width + '/h/' + height;
} else {
newSrc = src.replace('{mode}', mode)
.replace('{width}', width)
.replace('{height}', height);
}
return newSrc;
}
_pressRow(rowData){
this.props.onPressBrandItem(rowData.url)
}
renderRow(rowData,sectionID,rowID,highlightRow) {
let newSrc = rowData?rowData.src.replace('{mode}', 1)
.replace('{width}', itemHeight)
.replace('{height}', itemHeight):rowData.src;
let newSrc = BannerReourceList.getSlicedUrl(rowData.src, itemWidth, itemWidth, 1);
return (
<TouchableOpacity activeOpacity={0.5} onPress={() => {
this.props.onPressBrandItem && this.props.onPressBrandItem(rowData.url);
... ... @@ -54,10 +71,10 @@ export default class BannerReourceList extends React.Component {
}
render() {
let {resource} = this.props;
let res = resource.toJS();
let data = res.data;
let title = data?data.title:null;
let list = data?data.list:null;
if (!resource || resource.size == 0 || !list) {
... ... @@ -67,7 +84,7 @@ export default class BannerReourceList extends React.Component {
return (
<View style={styles.cellList}>
<View style={styles.titleStyle}>
<Text style={styles.titleText} numberOfLines={1}>推荐品牌</Text>
<Text style={styles.titleText} numberOfLines={1}>{title.title}</Text>
</View>
<ListView
showsHorizontalScrollIndicator ={false}
... ... @@ -82,7 +99,7 @@ export default class BannerReourceList extends React.Component {
let {width, height} = Dimensions.get('window');
let itemWidth= width/4;
let itemWidth= Math.ceil(width/4);
let itemHeight = 50;
let styles = StyleSheet.create({
... ...
... ... @@ -4,6 +4,7 @@ import React from 'react';
import ReactNative from 'react-native';
import Swiper from 'react-native-swiper';
import ImmutablePropTypes from 'react-immutable-proptypes';
import SlicedImage from './SlicedImage';
const {
View,
... ... @@ -56,21 +57,15 @@ export default class BrandSwiper extends React.Component {
}
if (list.length == 1) {
let newSrc = list[0].src.replace('{mode}', 1)
.replace('{width}', width)
.replace('{height}', swiperHeight);
return (
<TouchableOpacity
activeOpacity={1}
style={{width: width, height: swiperHeight}}
style={{width: width, height: height}}
onPress={() => {
this.props.onPressSlideItem && this.props.onPressSlideItem(data[0].url);
}}
>
<Image
source={{uri: newSrc}}
style={{ width: width, height: swiperHeight}}
/>
<SlicedImage source={{uri: list[0].src}} style={{width, height}}/>
</TouchableOpacity>
);
} else {
... ... @@ -85,12 +80,9 @@ export default class BrandSwiper extends React.Component {
dot={this.dot}
activeDot={(Platform.OS === 'ios')?this.activeDot:null}
width={width}
height={swiperHeight}
height={height}
>
{list.map((item, i) => {
let newSrc = item.src.replace('{mode}', 1)
.replace('{width}', width)
.replace('{height}', swiperHeight);
return (
<TouchableOpacity
key={i}
... ... @@ -99,10 +91,7 @@ export default class BrandSwiper extends React.Component {
this.props.onPressSlideItem && this.props.onPressSlideItem(item.url);
}}
>
<Image
source={{uri: newSrc}}
style={{width: width, height: swiperHeight}}
/>
<SlicedImage source={{uri: item.src}} style={{width, height}}/>
</TouchableOpacity>
);
})}
... ... @@ -112,8 +101,8 @@ export default class BrandSwiper extends React.Component {
}
}
let {width, height} = Dimensions.get('window');
let swiperHeight = Math.ceil((310 / 640) * width);
let {width} = Dimensions.get('window');
let height = Math.ceil((310 / 640) * width);
let styles = StyleSheet.create({
... ...
... ... @@ -10,6 +10,7 @@ const {
Image,
Dimensions,
TouchableOpacity,
PixelRatio,
} = ReactNative;
export default class NewHotBannerListCell extends React.Component {
... ... @@ -17,11 +18,27 @@ export default class NewHotBannerListCell extends React.Component {
super(props);
}
static getSlicedUrl(src, width, height, mode = 1) {
if (!src) {
return '';
}
width = PixelRatio.getPixelSizeForLayoutSize(width);
height = PixelRatio.getPixelSizeForLayoutSize(height);
let newSrc = src;
if (src.indexOf('imageView') === -1 && src.indexOf('imageMogr') === -1) {
newSrc = src + '?imageView2/' + mode + '/w/' + width + '/h/' + height;
} else {
newSrc = src.replace('{mode}', mode)
.replace('{width}', width)
.replace('{height}', height);
}
return newSrc;
}
render() {
let rowData = this.props.rowData;
let newSrc = rowData?rowData.brand_ico.replace('{mode}', 1)
.replace('{width}', itemWidth)
.replace('{height}', itemWidth):rowData.brand_ico;
let newSrc = NewHotBannerListCell.getSlicedUrl(rowData.brand_ico, width, height, 1);
return (
<TouchableOpacity activeOpacity={0.5} onPress={() => {
// this.props.onPressRecommendItem && this.props.onPressRecommendItem(rowData.get('url'));
... ... @@ -30,6 +47,7 @@ export default class NewHotBannerListCell extends React.Component {
<Image
source={{uri: newSrc}}
style={styles.thumbnail}
resizeMode={'contain'}
>
<View style={styles.itemTitle}>
... ... @@ -42,22 +60,22 @@ export default class NewHotBannerListCell extends React.Component {
}
};
let {width, height} = Dimensions.get('window');
let itemWidth = width / 3;
let width = Math.ceil(Dimensions.get('window').width / 3);
let height = width;
let styles = StyleSheet.create({
thumbnail: {
borderWidth: 0.5,
borderColor: '#CCC',
width: itemWidth,
height: itemWidth,
width: width,
height: height,
},
itemTitle: {
marginLeft:5,
marginTop: itemWidth - 30,
marginTop: width - 30,
justifyContent: 'center',
height: 30,
width: itemWidth - 10,
width: width - 10,
backgroundColor: 'transparent',
},
itemText: {
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
Image,
PixelRatio,
StyleSheet,
} = ReactNative;
export default class SlicedImage extends React.Component {
static propTypes = {
source: Image.propTypes.source,
};
static getSlicedUrl(src, width, height, mode = 1) {
if (!src) {
return '';
}
width = PixelRatio.getPixelSizeForLayoutSize(width);
height = PixelRatio.getPixelSizeForLayoutSize(height);
let newSrc = src;
if (src.indexOf('imageView') === -1 && src.indexOf('imageMogr') === -1) {
newSrc = src + '?imageView2/' + mode + '/w/' + width + '/h/' + height;
} else {
newSrc = src.replace('{mode}', mode)
.replace('{width}', width)
.replace('{height}', height);
}
// __DEV__ && console.log(newSrc);
return newSrc;
}
constructor(props) {
super (props);
// http://developer.qiniu.com/code/v6/api/kodo-api/index.html#image
this.mode = 1;
}
setNativeProps(nativeProps) {
this._root.setNativeProps(nativeProps);
}
_generateImageUrl(src) {
let style = StyleSheet.flatten(this.props.style);
let {width, height} = style;
let newSrc = SlicedImage.getSlicedUrl(src, width, height, this.mode);
return newSrc;
}
_isRemoteImageSrc(src) {
let prefix = 'http';
if (src.toLowerCase().substr(0, prefix.length) === prefix) {
return true;
}
return false;
}
render() {
let {source} = this.props;
if (source && source.uri && this._isRemoteImageSrc(source.uri)) {
let uri = this._generateImageUrl(source.uri);
return (
<Image ref={component => this._root = component} {...this.props} source={{uri}}/>
);
}
return (
<Image ref={component => this._root = component} {...this.props}/>
);
}
}
... ...