mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit cb7d1fa442dc4948e8b12de84f15e078e93b2fc0 1 parent a033a477

还原 消失的代码 review by hongmo

Inline Side-by-side
Showing 7 changed files with 127 additions and 110 deletions
... ... @@ -2,6 +2,7 @@
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
const {
StyleSheet,
... ... @@ -17,6 +18,15 @@ export default class AllBrandListCell extends React.Component {
super(props);
}
shouldComponentUpdate(nextProps){
if (Immutable.is(Immutable.fromJS(nextProps.rowData), Immutable.fromJS(this.props.rowData))) {
return false;
} else {
return true;
}
}
render() {
let name = this.props.rowData.brand_name;
... ...
... ... @@ -3,6 +3,7 @@
import React from 'react';
import ReactNative from 'react-native';
import {getSlicedUrl} from '../../utils/Utils';
import Immutable, {Map} from 'immutable';
const {
AppRegistry,
... ... @@ -24,6 +25,15 @@ export default class BannerReourceList extends React.Component {
});
}
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.resource, this.props.resource)) {
return false;
} else {
return true;
}
}
renderRow(rowData,sectionID,rowID,highlightRow) {
let newSrc = getSlicedUrl(rowData.src, 140, 100, 2);
... ... @@ -51,12 +61,15 @@ export default class BannerReourceList extends React.Component {
render() {
let {resource} = this.props;
let res = resource.toJS();
let custom_brands = resource.get('custom_brands');
let res = custom_brands.toJS();
let data = res.data;
let title = data?data.title:null;
let list = data?data.list:null;
if (!resource || resource.size == 0 || !list) {
if (!custom_brands || custom_brands.size == 0 || !list) {
return null;
}
... ...
... ... @@ -13,9 +13,7 @@ import {
} from 'react-native';
import {Map} from 'immutable';
import BrandSwiper from './BrandSwiper';
import BannerReourceList from './BannerReourceList';
import BrandFliter from './BrandFliter';
import BrandHeader from './BrandHeader';
import YH_SearchBar from '../../../common/components/YH_SearchBar';
import ChannelFliter from './ChannelFliter';
import AllBrandListCell from './AllBrandListCell';
... ... @@ -82,24 +80,6 @@ export default class Brand extends Component {
}
renderHeader(){
let data = this.props.reourceForBoy;
let brandFliter = this.props.brandFliter;
let brandChannelFliter = this.props.brandChannelFliter;
if (brandChannelFliter == 1) {
data = this.props.reourceForBoy;
} else if (brandChannelFliter == 2) {
data = this.props.reourceForGirl;
} else if (brandChannelFliter == 3) {
data = this.props.reourceForKid;
} else if (brandChannelFliter == 4) {
data = this.props.reourceForLifeStyle;
}
let banner = data.get('banner');
let custom_brands = data.get('custom_brands');
let brandsText = data.get('brandsText');
return (
<View style={styles.header}>
<TouchableOpacity
... ... @@ -115,9 +95,18 @@ export default class Brand extends Component {
editable={false}
/>
</TouchableOpacity>
{banner?<BrandSwiper resource={banner} onPressSlideItem={this.props.onPressSlideItem}/>:null}
{custom_brands?<BannerReourceList resource={custom_brands} onPressSlideItem={this.props.onPressSlideItem}/>:null}
{brandsText?<BrandFliter dataSource={brandsText} selectID={brandFliter} onPressFilter={this.props.onPressFilter}/>:null}
<BrandHeader
brandChannelFliter= {this.props.brandChannelFliter}
reourceForBoy= {this.props.reourceForBoy}
reourceForGirl={this.props.reourceForGirl}
reourceForKid={this.props.reourceForKid}
reourceForLifeStyle={this.props.reourceForLifeStyle}
onPressSlideItem= {this.props.onPressSlideItem}
onPressFilter= {this.props.onPressFilter}
brandFliter={this.props.brandFliter}
/>
</View>
);
}
... ...
... ... @@ -2,6 +2,7 @@
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
const {
View,
... ... @@ -29,6 +30,15 @@ export default class BrandFliter extends React.Component {
};
}
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.resource, this.props.resource) && Immutable.is(nextProps.selectID, this.props.selectID)) {
return false;
} else {
return true;
}
}
_renderRow(rowData, sectionID, rowID) {
let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};
... ... @@ -64,8 +74,11 @@ export default class BrandFliter extends React.Component {
render() {
let {dataSource} = this.props;
let res = dataSource.toJS();
let {resource} = this.props;
let brandsText = resource.get('brandsText');
let res = brandsText.toJS();
return (
<View style={styles.container}>
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import BrandSwiper from './BrandSwiper';
import BannerReourceList from './BannerReourceList';
import BrandFliter from './BrandFliter';
const {
View,
Image,
Text,
TouchableOpacity,
Dimensions,
StyleSheet,
} = ReactNative;
export default class BrandHeader extends React.Component {
constructor(props) {
super (props);
}
render() {
let data = this.props.reourceForBoy;
let brandFliter = this.props.brandFliter;
let brandChannelFliter = this.props.brandChannelFliter;
if (brandChannelFliter == 1) {
data = this.props.reourceForBoy;
} else if (brandChannelFliter == 2) {
data = this.props.reourceForGirl;
} else if (brandChannelFliter == 3) {
data = this.props.reourceForKid;
} else if (brandChannelFliter == 4) {
data = this.props.reourceForLifeStyle;
}
return (
<View style={styles.header}>
<BrandSwiper resource={data} onPressSlideItem={this.props.onPressSlideItem}/>
<BannerReourceList resource={data} onPressSlideItem={this.props.onPressSlideItem}/>
<BrandFliter resource={data} selectID={brandFliter} onPressFilter={this.props.onPressFilter}/>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
header: {
width,
backgroundColor: '#CCC'
},
});
... ...
... ... @@ -4,7 +4,8 @@ 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';
import SlicedImage from '../../../common/components/SlicedImage';
import Immutable, {Map} from 'immutable';
const {
View,
... ... @@ -46,13 +47,24 @@ export default class BrandSwiper extends React.Component {
/>;
}
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.resource, this.props.resource)) {
return false;
} else {
return true;
}
}
render() {
let {resource} = this.props;
let res = resource.toJS();
let banner = resource.get('banner');
let res = banner.toJS();
let list = res.data;
if (!resource || resource.size == 0 || !list) {
if (!banner || banner.size == 0 || !list) {
return null;
}
... ...
'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}/>
);
}
}