mobile / YH_RNComponent · Commits

Go to a project

Authored by 盖剑秋
Commit d5c4da889f0256e51eff927ddca34526870d1059 1 parent 61fb0241

Finish new brand of classify. reviewed by Boss Lin.

Inline Side-by-side
Showing 6 changed files with 654 additions and 405 deletions
... ... @@ -8,7 +8,7 @@ import ReactNative, {
ListView,
StyleSheet,
Dimensions,
TouchableOpacity,
TouchableOpacity
} from 'react-native';
import ChannelSelector from '../../../common/components/ChannelSelector';
... ... @@ -16,7 +16,6 @@ import LoadingIndicator from '../../../common/components/LoadingIndicator';
import NoNetworkTip from '../../../common/components/NoNetworkTip';
import CategoryBList from './CategoryBList';
export default class CategoryB extends Component {
constructor(props) {
... ... @@ -46,20 +45,16 @@ export default class CategoryB extends Component {
currentSubCateData,
cacheSubCateData,
contentFetching,
categoryError,
categoryError
} = this.props;
if (categoryError) {
return (
<NoNetworkTip
onPressReload={this.props.onPressReload}
/>
);
return (<NoNetworkTip onPressReload={this.props.onPressReload}/>);
} else if (categoryList.size > 0) {
return (
<View style={styles.container}>
<ChannelSelector selectedChannelId={currentChannelId} onSelectChannel={this.props.onSelectChannel} />
<CategoryBList
<ChannelSelector selectedChannelId={currentChannelId} onSelectChannel={this.props.onSelectChannel}/>
<CategoryBList
ref={(c) => {
this.categoryBList = c;
}}
... ... @@ -75,22 +70,22 @@ export default class CategoryB extends Component {
onPressCategoryBMore={this.props.onPressCategoryBMore}
onPressHotCategoryItem={this.props.onPressHotCategoryItem}
onPressHotBrandItem={this.props.onPressHotBrandItem}
onPressHotRecommendItem={this.props.onPressHotRecommendItem}
contentFetching={contentFetching}
onRefresh={this.props.onRefresh}
/>
</View>
);
} else {
return <LoadingIndicator isVisible={isFetching} />
return <LoadingIndicator isVisible={isFetching}/>
}
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
flex: 1,
},
flex: 1
}
});
... ...
... ... @@ -14,15 +14,14 @@ import ReactNative, {
Animated,
LayoutAnimation,
Platform,
InteractionManager,
InteractionManager
} from 'react-native';
import immutable from 'immutable';
import HotCategoryList from './HotCategoryList';
import HotBrandList from './HotBrandList';
import YH_Image from '../../../common/components/YH_Image';
import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh';
import HotRecommendList from './HotRecommendList'
export default class CategoryBList extends Component {
... ... @@ -35,7 +34,9 @@ export default class CategoryBList extends Component {
this.trigggePullToRefresh = this.trigggePullToRefresh.bind(this);
this.stopPullToRefresh = this.stopPullToRefresh.bind(this);
this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !immutable.is(r1, r2)
});
}
trigggePullToRefresh(categoryId, categoryValue) {
... ... @@ -66,50 +67,63 @@ export default class CategoryBList extends Component {
}
let tabName = this.props.currentChannelValue;
let tabID = 0;
if (tabName == 'boy') {
tabID = '1';
}else if (tabName == 'girl') {
tabID = '2';
}else if (tabName == 'kid') {
tabID = '3';
}else if (tabName == 'leftStyle') {
tabID = '4';
}
if (tabName == 'boy') {
tabID = '1';
} else if (tabName == 'girl') {
tabID = '2';
} else if (tabName == 'kid') {
tabID = '3';
} else if (tabName == 'leftStyle') {
tabID = '4';
}
switch (rowID) {
case 'bannerInfo':
{
let data = rowData.get(0).get("data").get(0);
if(data){
if (data) {
let imageSrc = getSlicedUrl(data.get("src"), 400, 125, 2);
let url = data.get("url");
let params = {
P_NAME : pageName,
TAB_ID : tabID,
TAB_NAME : tabName,
F_ID : 1001,
F_INDEX : 1,
ACTION_URL : url,
exposureEnd : 1,
P_NAME: pageName,
TAB_ID: tabID,
TAB_NAME: tabName,
F_ID: 1001,
F_INDEX: 1,
ACTION_URL: url,
exposureEnd: 1
};
return(
return (
<TouchableOpacity yh_exposureData={params} activeOpacity={0.8} onPress={() => {
this.props.onPressBannerResourceItem && this.props.onPressBannerResourceItem(url)}}>
this.props.onPressBannerResourceItem && this.props.onPressBannerResourceItem(url)
}}>
<YH_Image style={styles.banner} url={imageSrc}/>
</TouchableOpacity>
);
}
}
case 'salesInfo':
{
let params = {};
return (
<HotRecommendList
yh_exposureData={params}
title={'热门推荐'}
data={rowData}
onPressHotRecommendItem={this.props.onPressHotRecommendItem}
/>
);
}
case 'sortInfo':
{
let hotTitle = "全部" + this.props.currentCateValue;
let params = {
P_NAME : pageName,
TAB_ID : tabID,
TAB_NAME : tabName,
F_ID : 1002,
F_INDEX : 2,
exposureEnd : 1,
P_NAME: pageName,
TAB_ID: tabID,
TAB_NAME: tabName,
F_ID: 1002,
F_INDEX: 2,
exposureEnd: 1
};
return (
<HotCategoryList
... ... @@ -117,26 +131,28 @@ export default class CategoryBList extends Component {
title={hotTitle}
data={rowData}
onPressCategoryBMore={this.props.onPressCategoryBMore}
onPressHotCategoryItem={this.props.onPressHotCategoryItem}/>
onPressHotCategoryItem={this.props.onPressHotCategoryItem}
/>
);
}
case 'brandInfo':
{
let params = {
P_NAME : pageName,
TAB_ID : tabID,
TAB_NAME : tabName,
F_ID : 1003,
F_INDEX : 3,
exposureEnd : 1,
P_NAME: pageName,
TAB_ID: tabID,
TAB_NAME: tabName,
F_ID: 1003,
F_INDEX: 3,
exposureEnd: 1
};
return(
<HotBrandList
yh_exposureData={params}
hottype={"brand"}
data={rowData}
onPressHotBrandItem={this.props.onPressHotBrandItem}/>
);
return (
<HotBrandList
yh_exposureData={params}
hottype={"brand"}
data={rowData}
onPressHotBrandItem={this.props.onPressHotBrandItem}
/>
);
}
default:
... ... @@ -146,20 +162,37 @@ export default class CategoryBList extends Component {
}
renderRow(rowData, sectionID, rowID, highlightRow) {
let selectText = rowData ? rowData.get('category_name') : "";
let selectId = rowData ? rowData.get('category_id') : "";
let selectBg = this.props.currentCateId == selectId ? {backgroundColor: '#ffffff'} : {backgroundColor: '#f0f0f0'};
let selectText = rowData
? rowData.get('category_name')
: "";
let selectId = rowData
? rowData.get('category_id')
: "";
let selected = this.props.currentCateId == selectId;
let selectBg = selected
? {backgroundColor: '#ffffff'}
: {backgroundColor: '#f5f7f6'};
let titleColor = selected
? '#444444'
: '#b0b0b0';
let titleFont = selected
? 15
: 13;
return (
<TouchableOpacity
activeOpacity={1}
onPress={() => {
this.props.onSelectCategory && this.props.onSelectCategory(rowData.toJS());
}}
>
<View style={[styles.row, selectBg]} >
<Text style={styles.title} numberOfLines={1}>
<TouchableOpacity activeOpacity={1} onPress={() => {
this.props.onSelectCategory && this.props.onSelectCategory(rowData.toJS());
}}>
<View style={[styles.row, selectBg]}>
{selected
? <View style={styles.verticalBar}/>
: null}
<Text style={[
styles.title, {
color: titleColor,
fontSize: titleFont
}
]} numberOfLines={1}>
{selectText}
</Text>
</View>
... ... @@ -167,27 +200,34 @@ export default class CategoryBList extends Component {
);
}
renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View key={'sep' + rowID} style={styles.separator}></View>
);
}
render() {
let {categoryList, currentCateId, currentCateValue, currentSubCateData, contentFetching} = this.props;
if(!categoryList || categoryList.length == 0 || !currentSubCateData || currentSubCateData.length == 0)
if (!categoryList || categoryList.length == 0 || !currentSubCateData || currentSubCateData.length == 0)
return;
let cateList = categoryList.get(this.props.currentChannelValue) ? categoryList.get(this.props.currentChannelValue).toArray() : [];
let cateList = categoryList.get(this.props.currentChannelValue)
? categoryList.get(this.props.currentChannelValue).toArray()
: [];
let detailDataSource = {
bannerInfo: currentSubCateData.get('bannerInfo'),
sortInfo: currentSubCateData.get('sortInfo') ? currentSubCateData.get('sortInfo').toArray() : [],
brandInfo: currentSubCateData.get('brandInfo') ? currentSubCateData.get('brandInfo').toArray() : [],
salesInfo: currentSubCateData.get('salesInfo')
? currentSubCateData.get('salesInfo').toArray()
: [],
sortInfo: currentSubCateData.get('sortInfo')
? currentSubCateData.get('sortInfo').toArray()
: [],
brandInfo: currentSubCateData.get('brandInfo')
? currentSubCateData.get('brandInfo').toArray()
: []
};
let isPullToRefresh = contentFetching;
... ... @@ -204,9 +244,8 @@ export default class CategoryBList extends Component {
renderSeparator={this.renderSeparator}
scrollsToTop={false}
/>
{
Platform.OS === 'ios' ?
<ListView
{Platform.OS === 'ios'
? <ListView
ref='subCategoryList'
style={styles.subContentContainer}
dataSource={this.dataSource.cloneWithRows(detailDataSource)}
... ... @@ -221,44 +260,45 @@ export default class CategoryBList extends Component {
isOnPullToRefresh={isPullToRefresh}
yh_viewVisible={true}
onFinishRefreshData={() => {
this.refs.subCategoryList && this.refs.subCategoryList.yh_updateVisibleSubViews && this.refs.subCategoryList.yh_updateVisibleSubViews();//ios 专用
}}//ios 专用
this.refs.subCategoryList && this.refs.subCategoryList.yh_updateVisibleSubViews && this.refs.subCategoryList.yh_updateVisibleSubViews();
}}
onRefreshData={() => {
this.props.onRefresh && this.props.onRefresh(currentCateId, currentCateValue);
this.props.onRefresh && this.props.onRefresh(currentCateId, currentCateValue);
}}
/>
:
<ListView
ref='subCategoryList'
style={styles.subContentContainer}
dataSource={this.dataSource.cloneWithRows(detailDataSource)}
enableEmptySections={true}
renderRow={this.subRenderRow}
onPressBannerResourceItem={this.props.onPressBannerResourceItem}
onPressCategoryBMore={this.props.onPressCategoryBMore}
onPressHotCategoryItem={this.props.onPressHotCategoryItem}
onPressHotBrandItem={this.props.onPressHotBrandItem}
scrollsToTop={false}
enablePullToRefresh={true}
isOnPullToRefresh={isPullToRefresh}
yh_viewVisible={true}
refreshControl={
<YH_PtrRefresh
refreshing={isPullToRefresh}
onRefresh={() => {
: <ListView
ref='subCategoryList'
style={styles.subContentContainer}
dataSource={this.dataSource.cloneWithRows(detailDataSource)}
enableEmptySections={true}
renderRow={this.subRenderRow}
onPressBannerResourceItem={this.props.onPressBannerResourceItem}
onPressCategoryBMore={this.props.onPressCategoryBMore}
onPressHotCategoryItem={this.props.onPressHotCategoryItem}
onPressHotBrandItem={this.props.onPressHotBrandItem}
scrollsToTop={false}
enablePullToRefresh={true}
isOnPullToRefresh={isPullToRefresh}
yh_viewVisible={true}
refreshControl={
< YH_PtrRefresh
refreshing = {isPullToRefresh}
onRefresh = {
() => {
this.props.onRefresh && this.props.onRefresh(currentCateId, currentCateValue);
}}
/>
}
/>
}
}
}
/>
}
/>
}
</View>
);
}
}
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
const DEVICE_WIDTH_RATIO = width / 375;
let styles = StyleSheet.create({
container: {
... ... @@ -266,46 +306,48 @@ let styles = StyleSheet.create({
flexDirection: 'row',
width: width,
height: height - 156,
backgroundColor: 'white',
backgroundColor: 'white'
},
contentContainer: {
backgroundColor: '#f0f0f0',
width: 100 * DEVICE_WIDTH_RATIO,
height: height - 156,
backgroundColor: '#f5f7f6',
width: 102.5 * DEVICE_WIDTH_RATIO,
height: height - 156
},
subContentContainer: {
backgroundColor: 'white',
width: 215 * DEVICE_WIDTH_RATIO,
height: height - 156 - 5,
marginLeft: 5 * DEVICE_WIDTH_RATIO,
marginTop: 5 * DEVICE_WIDTH_RATIO,
paddingRight: 5 * DEVICE_WIDTH_RATIO,
width: width - 102.5 * DEVICE_WIDTH_RATIO,
height: height - 156
},
row: {
flexDirection: 'row',
alignItems: 'center',
height: 49.5 * DEVICE_WIDTH_RATIO,
width: 100 * DEVICE_WIDTH_RATIO,
paddingLeft: 12 * DEVICE_WIDTH_RATIO,
backgroundColor: '#f0f0f0',
height: 60 * DEVICE_WIDTH_RATIO,
width: 102.5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#f0f0f0'
},
verticalBar: {
width: 4,
height: 60 * DEVICE_WIDTH_RATIO,
backgroundColor: '#444444'
},
separator: {
width: width,
height: 0.5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#e0e0e0',
height: 1,
backgroundColor: 'white'
},
title: {
flex: 1,
fontSize: 15,
color: '#444444',
width: 102.5 * DEVICE_WIDTH_RATIO - 8,
textAlign: 'center'
},
banner:{
width: 200 * DEVICE_WIDTH_RATIO,
height: 62.5 * DEVICE_WIDTH_RATIO,
banner: {
width: 234 * DEVICE_WIDTH_RATIO,
height: 73 * DEVICE_WIDTH_RATIO,
backgroundColor: '#ffffff',
marginLeft: 5 * DEVICE_WIDTH_RATIO,
marginTop: 5 * DEVICE_WIDTH_RATIO,
marginRight: 5 * DEVICE_WIDTH_RATIO,
marginBottom: 10 * DEVICE_WIDTH_RATIO,
},
marginBottom: 10 * DEVICE_WIDTH_RATIO
}
});
... ...
... ... @@ -12,160 +12,150 @@ import ReactNative, {
StyleSheet,
Dimensions,
TouchableOpacity,
Platform,
Platform
} from 'react-native';
import Immutable from 'immutable';
export default class HotBrandList extends Component{
export default class HotBrandList extends Component {
constructor(props) {
super(props);
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2)
});
this.renderHeader = this.renderHeader.bind(this);
this.renderRow = this.renderRow.bind(this);
this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !Immutable.is(r1, r2)});
this.renderHeader = this.renderHeader.bind(this);
this.renderRow = this.renderRow.bind(this);
}
}
renderHeader() {
renderHeader(){
return (
<View style={styles.headerContainer}>
<View style={styles.headerBar}/>
<Text style={styles.headerText}>热门品牌</Text>
<View style={styles.headerBar}/>
</View>
)
}
return(
<View style={styles.headerContainer}>
<Text style={styles.headerText}>热门品牌</Text>
<Text style={styles.headerMore}></Text>
<View style={styles.headerLine}/>
</View>
);
}
renderRow(rowData, sectionID, rowID, highlightRow) {
renderRow(rowData, sectionID, rowID, highlightRow){
if (!rowData || rowData.length == 0) {
if (!rowData || rowData.length == 0) {
return null;
}
let imageUrl = SlicedImage.getSlicedUrl(rowData.get("brand_ico"), (70 - diff), 29, 2);
let brandName = rowData.get("brand_name");
let imageUrl = SlicedImage.getSlicedUrl(rowData.get("brand_ico"), (70 - diff), 29, 2);
let brandName = rowData.get("brand_name");
let brandID = rowData.get("id");
let yh_exposureData = this.props.yh_exposureData?this.props.yh_exposureData:null;
let yh_exposureData = this.props.yh_exposureData
? this.props.yh_exposureData
: null;
if (yh_exposureData) {
yh_exposureData = {
I_INDEX: parseInt(rowID)+1+'',
I_INDEX: parseInt(rowID) + 1 + '',
BRAND_ID: brandID,
...yh_exposureData,
...yh_exposureData
};
}
return (
return (
<TouchableOpacity onPress={() => this.props.onPressHotBrandItem && this.props.onPressHotBrandItem(rowData.toJS(), rowID)}>
<View style={styles.rowContainer}>
<View style={styles.rowImageContainer}><YH_Image style={styles.rowThumbnail} key={imageUrl} url={imageUrl}/></View>
<Text style={styles.rowText} numberOfLines={1}>{brandName}</Text>
<View style={styles.rowImageContainer}><YH_Image style={styles.rowThumbnail} key={imageUrl} url={imageUrl}/></View>
<Text style={styles.rowText} numberOfLines={1}>{brandName}</Text>
</View>
</TouchableOpacity>
);
}
render(){
let {data} = this.props;
return(
<View style={styles.container}>
<ListView
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(data)}
enableEmptySections={true}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
</View>
}
render() {
let {data} = this.props;
return (
<View style={styles.container}>
<ListView
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(data)}
enableEmptySections={true}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
</View>
);
}
}
};
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let diff = (Platform.OS === 'android' && width < 440) ? 1 : 0;
const DEVICE_WIDTH_RATIO = width / 375;
let diff = (Platform.OS === 'android' && width < 440)
? 1
: 0;
let cellWidth = 78 * DEVICE_WIDTH_RATIO;
let cellHeight = 97 * DEVICE_WIDTH_RATIO;
let cellPadding = ((width - 102.5 * DEVICE_WIDTH_RATIO) - cellWidth * 3) / 4;
let styles = StyleSheet.create({
container: {
flexWrap: 'wrap',
container: {
flexWrap: 'wrap'
},
contentContainer: {
flexDirection: 'row',
contentContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems:'flex-start',
backgroundColor:'white',
},
headerContainer:{
width: 210 * DEVICE_WIDTH_RATIO,
height: 50 * DEVICE_WIDTH_RATIO,
paddingLeft: 5 * DEVICE_WIDTH_RATIO,
paddingRight: 5 * DEVICE_WIDTH_RATIO,
},
headerText:{
position: 'absolute',
left: 5 * DEVICE_WIDTH_RATIO,
bottom: 11 * DEVICE_WIDTH_RATIO,
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
},
headerMore:{
position: 'absolute',
right: 0,
bottom: 11 * DEVICE_WIDTH_RATIO,
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
},
headerLine:{
width: 200 * DEVICE_WIDTH_RATIO,
height: 0.5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#E0E0E0',
left: 0,
top: 45 * DEVICE_WIDTH_RATIO,
},
rowContainer:{
width: (70 - diff) * DEVICE_WIDTH_RATIO,
height: (70 - diff) * DEVICE_WIDTH_RATIO ,
},
rowImageContainer:{
width: (70 - diff) * DEVICE_WIDTH_RATIO,
height: 50 * DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center',
},
rowThumbnail:{
width: (70 - diff) * DEVICE_WIDTH_RATIO,
height: 29 * DEVICE_WIDTH_RATIO,
},
rowText:{
width: (70 - diff) * DEVICE_WIDTH_RATIO,
height: 20 * DEVICE_WIDTH_RATIO,
fontSize: 10,
color: '#B0B0B0',
textAlign: 'center',
},
alignItems: 'flex-start',
backgroundColor: 'white'
},
rowContainer: {
width: cellWidth - diff,
marginLeft: cellPadding
},
rowImageContainer: {
width: cellWidth,
height: 50 * DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center'
},
rowThumbnail: {
width: cellWidth,
height: 32 * DEVICE_WIDTH_RATIO
},
rowText: {
width: (70 - diff) * DEVICE_WIDTH_RATIO,
height: 20 * DEVICE_WIDTH_RATIO,
fontSize: 10,
color: '#B0B0B0',
textAlign: 'center'
},
headerText: {
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: '#444444',
marginLeft: 12,
marginRight: 12
},
headerBar: {
width: 15,
height: 1,
backgroundColor: '#444444'
},
headerContainer: {
width: width - 102.5 * DEVICE_WIDTH_RATIO,
height: 40 * DEVICE_WIDTH_RATIO,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row'
}
});
... ...
... ... @@ -12,206 +12,213 @@ import ReactNative, {
StyleSheet,
Dimensions,
TouchableOpacity,
Platform,
Platform
} from 'react-native';
import Immutable from 'immutable';
export default class HotCategoryList extends Component{
export default class HotCategoryList extends Component {
constructor(props) {
super(props);
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2)
});
this.renderHeader = this.renderHeader.bind(this);
this.renderRow = this.renderRow.bind(this);
this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !Immutable.is(r1, r2)});
this.renderHeader = this.renderHeader.bind(this);
this.renderRow = this.renderRow.bind(this);
}
}
renderHeader(){
let {title} = this.props;
let yh_exposureData = this.props.yh_exposureData?this.props.yh_exposureData:null;
if (yh_exposureData) {
yh_exposureData = {
I_INDEX: 0,
...yh_exposureData,
};
}
return(
<View style={styles.headerContainer}>
<View style={styles.headerTextContainer}>
<Text style={styles.headerText}>{title}</Text>
<TouchableOpacity yh_exposureData={yh_exposureData} style={styles.headerMore} activeOpacity={1} onPress={() => this.props.onPressCategoryBMore && this.props.onPressCategoryBMore()}>
<Text style={styles.headerMoreText}>MORE</Text>
<Image style={styles.headerMoreArrow} source={require("../../images/category_b_arrow.png")}/>
</TouchableOpacity>
</View>
<View style={styles.headerLine}/>
</View>
);
}
renderHeader() {
let {title} = this.props;
return (
<View style={styles.headerContainer}>
<View style={styles.headerBar}/>
<Text style={styles.headerText}>{title}</Text>
<View style={styles.headerBar}/>
</View>
)
}
renderRow(rowData, sectionID, rowID, highlightRow){
renderRow(rowData, sectionID, rowID, highlightRow) {
if (!rowData || rowData.length == 0) {
if (!rowData || rowData.length == 0) {
return null;
}
let topMargin = {
marginTop: cellPadding
};
if (rowID < 3) {
topMargin = {
marginTop: 0
};
}
let yh_exposureData = this.props.yh_exposureData
? this.props.yh_exposureData
: null;
if (rowData === 'more') {
if (yh_exposureData) {
yh_exposureData = {
I_INDEX: 0,
...yh_exposureData
};
}
return (
<TouchableOpacity yh_exposureData={yh_exposureData} onPress={() => {
this.props.onPressCategoryBMore && this.props.onPressCategoryBMore()
}}>
<View style={[styles.rowContainer, topMargin]}>
<Text style={styles.moreText}>MORE</Text>
</View>
</TouchableOpacity>
)
}
let imageUrl = rowData.get("default_images");
let hasImage;
if(imageUrl){
imageUrl = SlicedImage.getSlicedUrl(rowData.get("default_images"), 98, 128, 2);
hasImage = true;
}
else{
if (imageUrl) {
imageUrl = SlicedImage.getSlicedUrl(rowData.get("default_images"), 98, 128, 2);
hasImage = true;
} else {
hasImage = false;
}
let subcategoryId = rowData.get('category_id');
let yh_exposureData = this.props.yh_exposureData?this.props.yh_exposureData:null;
if (yh_exposureData) {
yh_exposureData = {
I_INDEX: parseInt(rowID)+1+'',
I_INDEX: parseInt(rowID) + 1 + '',
L2_CATE_ID: subcategoryId,
...yh_exposureData,
...yh_exposureData
};
}
return (
<TouchableOpacity yh_exposureData={yh_exposureData} onPress={() => this.props.onPressHotCategoryItem && this.props.onPressHotCategoryItem(rowData.toJS(),rowID)}>
<View style={styles.rowContainer}>
{hasImage ? <YH_Image style={styles.rowThumbnail} key={imageUrl} url={imageUrl}/>
: <View style={styles.rowDefaultImageContainer}><Image style={styles.rowDefaultImage} source={require('../../images/yoho_icon.png')}/></View>}
<View style={styles.rowTextContainer}><Text style={styles.rowText} numberOfLines={2}>{rowData.get("category_name")}</Text></View>
<TouchableOpacity yh_exposureData={yh_exposureData} onPress={() => this.props.onPressHotCategoryItem && this.props.onPressHotCategoryItem(rowData.toJS(), rowID)}>
<View style={[styles.rowContainer, topMargin]}>
{hasImage
? <YH_Image style={styles.rowThumbnail} key={imageUrl} url={imageUrl}/>
: <View style={styles.rowDefaultImageContainer}><Image style={styles.rowDefaultImage} source={require('../../images/yoho_icon.png')}/></View>}
<View style={styles.rowTextContainer}>
<Text style={styles.rowText} numberOfLines={2}>{rowData.get("category_name")}</Text>
</View>
</View>
</TouchableOpacity>
);
}
render(){
let {data} = this.props;
return(
<View style={styles.container}>
<ListView
pageSize={3}
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(data)}
enableEmptySections={true}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
</View>
}
render() {
let {data} = this.props;
data.push('more');
return (
<View style={styles.container}>
<ListView
pageSize={3}
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(data)}
enableEmptySections={true}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
</View>
);
}
}
};
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let diff = (Platform.OS === 'android' && width < 440) ? 1 : 0;
const DEVICE_WIDTH_RATIO = width / 375;
let diff = (Platform.OS === 'android' && width < 440)
? 1
: 0;
let cellWidth = 78 * DEVICE_WIDTH_RATIO;
let cellHeight = 97 * DEVICE_WIDTH_RATIO;
let cellPadding = ((width - 102.5 * DEVICE_WIDTH_RATIO) - cellWidth * 3) / 4;
let styles = StyleSheet.create({
container: {
flexWrap: 'wrap',
container: {
flexWrap: 'wrap'
},
contentContainer: {
flexDirection: 'row',
contentContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems:'center',
backgroundColor: '#f5f7f6',
},
headerContainer:{
width: 210 * DEVICE_WIDTH_RATIO,
height: 40 * DEVICE_WIDTH_RATIO,
paddingLeft: 5 * DEVICE_WIDTH_RATIO,
paddingRight: 5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#ffffff',
},
headerTextContainer:{
position: 'absolute',
left: 5 * DEVICE_WIDTH_RATIO,
bottom: 11 * DEVICE_WIDTH_RATIO,
flexDirection: 'row',
alignItems:'center',
},
headerText:{
flex: 1,
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
},
headerMore:{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
headerMoreText:{
fontSize: 10 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
marginRight: 5 * DEVICE_WIDTH_RATIO,
},
headerMoreArrow: {
width: 4 * DEVICE_WIDTH_RATIO,
height: 7 * DEVICE_WIDTH_RATIO,
alignItems: 'center',
backgroundColor: 'white'
},
headerTextContainer: {
position: 'absolute',
left: 5 * DEVICE_WIDTH_RATIO,
bottom: 11 * DEVICE_WIDTH_RATIO,
flexDirection: 'row',
alignItems: 'center'
},
headerLine:{
width: 200 * DEVICE_WIDTH_RATIO,
height: 0.5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#E0E0E0',
left: 0,
top: 35 * DEVICE_WIDTH_RATIO,
},
rowContainer:{
width: (70 - diff) * DEVICE_WIDTH_RATIO,
height: 95 * DEVICE_WIDTH_RATIO,
paddingLeft: 5 * DEVICE_WIDTH_RATIO,
paddingRight: 5 * DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f7f6',
},
rowThumbnail:{
width: 48 * DEVICE_WIDTH_RATIO,
height: 65 * DEVICE_WIDTH_RATIO,
},
rowDefaultImageContainer:{
width: 48 * DEVICE_WIDTH_RATIO,
height: 65 * DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center',
},
rowDefaultImage:{
width: 48 * DEVICE_WIDTH_RATIO,
height: 28 * DEVICE_WIDTH_RATIO,
},
rowTextContainer:{
width: 53 * DEVICE_WIDTH_RATIO,
height: 28 * DEVICE_WIDTH_RATIO,
marginTop: 2 * DEVICE_WIDTH_RATIO,
},
rowText:{
fontSize: 9 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
textAlign: 'center',
},
rowContainer: {
width: cellWidth - diff,
height: cellHeight,
marginTop: cellPadding,
marginLeft: cellPadding,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f7f6'
},
rowThumbnail: {
width: 48 * DEVICE_WIDTH_RATIO,
height: 65 * DEVICE_WIDTH_RATIO
},
rowDefaultImageContainer: {
width: 48 * DEVICE_WIDTH_RATIO,
height: 65 * DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center'
},
rowDefaultImage: {
width: 48 * DEVICE_WIDTH_RATIO,
height: 28 * DEVICE_WIDTH_RATIO
},
rowTextContainer: {
width: 53 * DEVICE_WIDTH_RATIO,
height: 28 * DEVICE_WIDTH_RATIO,
marginTop: 2 * DEVICE_WIDTH_RATIO
},
rowText: {
fontSize: 10 * DEVICE_WIDTH_RATIO,
color: '#444444',
textAlign: 'center'
},
headerText: {
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: '#444444',
marginLeft: 12,
marginRight: 12
},
headerBar: {
width: 15,
height: 1,
backgroundColor: '#444444'
},
headerContainer: {
width: width - 102.5 * DEVICE_WIDTH_RATIO,
height: 40 * DEVICE_WIDTH_RATIO,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row'
},
moreText: {
fontFamily: 'Helvetica Bold',
fontSize: 12,
color: '#b0b0b0'
}
});
... ...
'use strict';
import React, {Component} from 'react';
import SlicedImage from '../../../common/components/SlicedImage';
import YH_Image from '../../../common/components/YH_Image';
import ReactNative, {
View,
Text,
Image,
ListView,
StyleSheet,
Dimensions,
TouchableOpacity,
Platform
} from 'react-native';
import Immutable from 'immutable';
export default class HotRecommendList extends Component {
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2)
});
this.renderHeader = this.renderHeader.bind(this);
this.renderRow = this.renderRow.bind(this);
}
renderHeader() {
let {title} = this.props;
return (
<View style={styles.headerContainer}>
<View style={styles.headerBar}/>
<Text style={styles.headerText}>{title}</Text>
<View style={styles.headerBar}/>
</View>
)
}
renderRow(rowData, sectionID, rowID, highlightRow) {
if (!rowData || rowData.length == 0) {
return null;
}
let topMargin = {
marginTop: cellPadding
};
if (rowID < 3) {
topMargin = {
marginTop: 0
};
}
let yh_exposureData = this.props.yh_exposureData
? this.props.yh_exposureData
: null;
let imageUrl = rowData.get("default_images");
let hasImage;
if (imageUrl) {
imageUrl = SlicedImage.getSlicedUrl(rowData.get("default_images"), 98, 128, 2);
hasImage = true;
} else {
hasImage = false;
}
let subcategoryId = rowData.get('category_id');
if (yh_exposureData) {
yh_exposureData = {
I_INDEX: parseInt(rowID) + 1 + '',
L2_CATE_ID: subcategoryId,
...yh_exposureData
};
}
let url = rowData.get('url');
return (
<TouchableOpacity yh_exposureData={yh_exposureData} onPress={() => this.props.onPressHotRecommendItem && this.props.onPressHotRecommendItem(url, rowID)}>
<View style={[styles.rowContainer, topMargin]}>
{hasImage
? <YH_Image style={styles.rowThumbnail} key={imageUrl} url={imageUrl}/>
: <View style={styles.rowDefaultImageContainer}><Image style={styles.rowDefaultImage} source={require('../../images/yoho_icon.png')}/></View>}
<View style={styles.rowTextContainer}>
<Text style={styles.rowText} numberOfLines={2}>{rowData.get("category_name")}</Text>
</View>
</View>
</TouchableOpacity>
);
}
render() {
let {data} = this.props;
return (
<View style={styles.container}>
<ListView
pageSize={3}
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(data)}
enableEmptySections={true}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
</View>
);
}
};
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
let diff = (Platform.OS === 'android' && width < 440)
? 1
: 0;
let cellWidth = 78 * DEVICE_WIDTH_RATIO;
let cellHeight = 97 * DEVICE_WIDTH_RATIO;
let cellPadding = ((width - 102.5 * DEVICE_WIDTH_RATIO) - cellWidth * 3) / 4;
let styles = StyleSheet.create({
container: {
flexWrap: 'wrap'
},
contentContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
backgroundColor: 'white'
},
headerTextContainer: {
position: 'absolute',
left: 5 * DEVICE_WIDTH_RATIO,
bottom: 11 * DEVICE_WIDTH_RATIO,
flexDirection: 'row',
alignItems: 'center'
},
rowContainer: {
width: cellWidth - diff,
height: cellHeight,
marginTop: cellPadding,
marginLeft: cellPadding,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f7f6'
},
rowThumbnail: {
width: 48 * DEVICE_WIDTH_RATIO,
height: 65 * DEVICE_WIDTH_RATIO
},
rowDefaultImageContainer: {
width: 48 * DEVICE_WIDTH_RATIO,
height: 65 * DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center'
},
rowDefaultImage: {
width: 48 * DEVICE_WIDTH_RATIO,
height: 28 * DEVICE_WIDTH_RATIO
},
rowTextContainer: {
width: 53 * DEVICE_WIDTH_RATIO,
height: 28 * DEVICE_WIDTH_RATIO,
marginTop: 2 * DEVICE_WIDTH_RATIO
},
rowText: {
fontSize: 10 * DEVICE_WIDTH_RATIO,
color: '#444444',
textAlign: 'center'
},
headerText: {
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: '#444444',
marginLeft: 12,
marginRight: 12
},
headerBar: {
width: 15,
height: 1,
backgroundColor: '#444444'
},
headerContainer: {
width: width - 102.5 * DEVICE_WIDTH_RATIO,
height: 40 * DEVICE_WIDTH_RATIO,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row'
},
moreText: {
fontFamily: 'Helvetica Bold',
fontSize: 12,
color: '#b0b0b0'
}
});
... ...
... ... @@ -55,13 +55,14 @@ class CategoryBContainer extends Component {
this._onPressCategoryBMore = this._onPressCategoryBMore.bind(this);
this._onPressHotCategoryItem = this._onPressHotCategoryItem.bind(this);
this._onPressHotBrandItem = this._onPressHotBrandItem.bind(this);
this._onPressHotRecommendItem = this._onPressHotRecommendItem.bind(this);
this.onRefresh = this.onRefresh.bind(this);
this.onPressReload = this.onPressReload.bind(this);
this.subscription = NativeAppEventEmitter.addListener(
'ChannelDidChangeEvent',
(reminder) => {
this.props.actions.setDelayExposeData(true);
this.props.actions.setDelayExposeData(true);
let id = reminder.channel;
let value;
if(id == 2){
... ... @@ -82,7 +83,7 @@ class CategoryBContainer extends Component {
'CategoryViewDidAppearEvent',
() => {
this.props.categoryB.delayExposeData && this.props.actions.startExposeData();
this.props.actions.setDelayExposeData(false);
this.props.actions.setDelayExposeData(false);
}
);
}
... ... @@ -111,7 +112,7 @@ class CategoryBContainer extends Component {
}
this.category && this.category.stopPullToRefresh();
this.props.actions.setCurrentCateB(categoryId, categoryValue);
this.props.actions.fetchSubCategory(categoryId, categoryValue, () => {
... ... @@ -126,7 +127,7 @@ class CategoryBContainer extends Component {
node_count: category.node_count,
};
//设置当前的类别信息
this.props.actions.jumpToCategory(all, 0, this.props.categoryB.currentChannelId);
this.props.actions.jumpToCategory(all, 0, this.props.categoryB.currentChannelId);
}
}
... ... @@ -174,6 +175,12 @@ class CategoryBContainer extends Component {
NativeModules.YH_CommonHelper.logEvent('YB_CATEGORY_CAT_FLR_C', params);
}
_onPressHotRecommendItem(url, index = 0) {
if (url && url.length) {
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
}
_onPressHotCategoryItem(value, index) {
let {currentChannelId, currentCateId, currentCateValue} = this.props.categoryB;
... ... @@ -255,6 +262,7 @@ class CategoryBContainer extends Component {
onPressCategoryBMore={this._onPressCategoryBMore}
onPressHotCategoryItem={this._onPressHotCategoryItem}
onPressHotBrandItem={this._onPressHotBrandItem}
onPressHotRecommendItem={this._onPressHotRecommendItem}
onRefresh={this.onRefresh}
onPressReload={this.onPressReload}
/>
... ...