mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 3604ccd1aa309eb9101fa772583e9a856fccd084 1 parent 9a25884a

add header

Inline Side-by-side
Showing 7 changed files with 231 additions and 46 deletions
... ... @@ -21,7 +21,7 @@ import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as brandStoreActions from '../../reducers/brandStore/brandStoreActions';
import BrandStoreHeaderView from '../brandStore/brandStoreSubView/SessionHeader/BrandStoreHeaderView';
import ShopTopBanner from '../brandStore/brandStoreSubView/Cells/ShopTopBanner';
import CouponCell from '../brandStore/brandStoreSubView/Cells/CouponCell';
import BrandListCell from '../brandStore/brandStoreSubView/Cells/BrandListCell';
import BrandSwiper from '../brandStore/brandStoreSubView/Cells/BrandSwiper';
... ... @@ -29,6 +29,8 @@ import OneRowTwoColImages from '../brandStore/brandStoreSubView/Cells/OneRowTwoC
import Recommend from '../brandStore/brandStoreSubView/Cells/Recommend';
import BrandProductFilter from '../brandStore/brandStoreSubView/Cells/BrandProductFilter'
import ProductListCell from '../brandStore/brandStoreSubView/Cells/BrandProductListCell';
import BrandStoreFilter from '../brandStore/brandStoreSubView/Cells/BrandStoreFilter';
export default class BrandStore extends Component {
constructor(props) {
... ... @@ -53,8 +55,19 @@ export default class BrandStore extends Component {
renderSectionHeader(sectionData, sectionID) {
switch(sectionID) {
// 顶部menu
case 'brandReource': {
return (
<BrandStoreFilter
onPressFilter={this.props.onPressFilter}
/>
);
}
// 底部商品列表筛选工具栏
case 'hotProducts_APP': {
return (
<Text>最新、价格、折扣、筛选</Text>
);
}
default:
return null;
}
... ... @@ -63,7 +76,7 @@ export default class BrandStore extends Component {
renderRow(rowData, sectionID, rowID, highlightRow) {
if (sectionID == 'shopTopBanner_APP') {
return (
<BrandStoreHeaderView
<ShopTopBanner
backgroundImage={rowData}
info={this.props.info}
onPressCollection={this.props.onPressCollection}
... ... @@ -75,14 +88,20 @@ export default class BrandStore extends Component {
case '0':
{
return (
<CouponCell />
<CouponCell
resource={rowData}
onPressCoupon={this.props.onPressCoupon}
/>
);
}
break;
case '1':
{
return (
<BrandListCell />
<BrandListCell
resource={rowData}
onPressBrandItem={this.props.onPressBrandItem}
/>
);
}
break;
... ... @@ -133,6 +152,7 @@ export default class BrandStore extends Component {
data={rowData}
/>
);
return null;
}
}
render() {
... ... @@ -149,7 +169,7 @@ export default class BrandStore extends Component {
let dataSource = {
shopTopBanner_APP: [shopTopBanner_APP],
brandReource:[coupon,brandBrowse,largeSlideImg_APP,oneRowTwoColImages_APP,recommend_APP,hotProducts_APP.list ? hotProducts_APP.list.toArray() : []],
productList: productList.list.toArray(),
// productList: productList.list.toArray(),
};
return (
... ... @@ -159,7 +179,6 @@ export default class BrandStore extends Component {
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
enableEmptySections = {true}
/>
);
}
... ...
... ... @@ -18,47 +18,55 @@ export default class BrandListCell extends React.Component {
constructor(props) {
super(props);
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2' ,'row 3' ,'row 4', 'row 5']),
touchBrandItem : false,
};
}
render() {
return (
<View style={styles.cellList}>
<Text style={styles.titleStyle}>
品牌一览
</Text>
<ListView
showsHorizontalScrollIndicator ={false}
dataSource={this.state.dataSource}
horizontal={true}
renderRow={this.renderRow.bind(this)}
/>
</View>
_pressRow(rowData){
this.props.onPressBrandItem(rowData.url)
}
);
}
renderRow(rowData,sectionID,rowID,highlightRow) {
return (
<TouchableOpacity activeOpacity={0.5} onPress={this.props.onPressBrandItem}>
<TouchableOpacity activeOpacity={0.5} onPress={() => this._pressRow(rowData)}>
<View style={styles.row}>
<Image
source={require('../../../../image/2.png')}
source={{uri: rowData.src}}
// source={require('../../../../image/2.png')}
style={{ width: 100, height: 120}}
resizeMode={'cover'}
></Image>
<Text style={styles.text}>
{rowData}
{rowData.name}
</Text>
</View>
</TouchableOpacity>
);
}
render() {
let data = this.props.resource.toJS();
let list = data.brands;
if (list.length == 0) {
return null;
}
return (
<View style={styles.cellList}>
<Text style={styles.titleStyle}>
品牌一览
</Text>
<ListView
showsHorizontalScrollIndicator ={false}
dataSource={this.dataSource.cloneWithRows(list)}
horizontal={true}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
};
let styles = StyleSheet.create({
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
View,
Text,
ListView,
TouchableOpacity,
Dimensions,
StyleSheet,
} = ReactNative;
export default class BrandStoreFilter extends React.Component {
constructor(props) {
super (props);
this._renderRow = this._renderRow.bind(this);
this._renderSeparator = this._renderSeparator.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1.key != r2.key,
});
this.state = {
filters: [
{
key: 'default',
name: '首页',
isSelect: false,
},
{
key: 'new',
name: '上新',
isSelect: false,
},
{
key: 'person',
name: '人气',
isSelect: false,
},
{
key: 'AllProduct',
name: '全部商品',
isSelect: false,
},
],
selectedIndex: 0,
};
}
_renderRow(rowData, sectionID, rowID) {
let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};
return (
<TouchableOpacity onPress={() => {
let filters = this.state.filters;
let filter = this.state.filters[rowID];
if (this.state.selectedIndex == rowID) {
return;
}
filter.isSelect = !filter.isSelect;
filters[rowID] = filter;
this.setState({
selectedIndex: rowID,
filters,
});
let value = filter.isSelect;
this.props.onPressFilter(value);
}}>
<View key={'row' + rowID} style={styles.rowContainer}>
<Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
</View>
</TouchableOpacity>
);
}
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View key={'sep' + rowID} style={styles.separator}>
</View>
);
}
render() {
let {style} = this.props;
return (
<View style={[styles.container, style]}>
<ListView
contentContainerStyle={[styles.contentContainer, style]}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(this.state.filters)}
renderRow={this._renderRow}
renderSeparator={this._renderSeparator}
scrollEnabled={false}
scrollsToTop={false}
/>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
marginLeft: -1,
width: width + 2,
height: 37,
borderTopColor: 'transparent',
borderBottomColor: '#e5e5e5',
borderWidth: 0.5,
backgroundColor:'white',
},
contentContainer: {
flexDirection: 'row',
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: Math.ceil(width / 4),
height: 37,
backgroundColor:'white',
},
name: {
color: '#b0b0b0',
},
separator: {
width: 0.5,
top: 37 / 4,
height: 37 / 2,
backgroundColor: '#e5e5e5',
},
});
... ...
... ... @@ -19,22 +19,10 @@ export default class CouponCell extends React.Component {
super(props);
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2' ,'row 3' ,'row 4', 'row 5']),
hasBuy : false,
};
}
render() {
return (
<View style={styles.viewStyle}>
<ListView
showsHorizontalScrollIndicator ={false}
dataSource={this.state.dataSource}
horizontal={true}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
renderRow(rowData,sectionID,rowID,highlightRow) {
return (
<TouchableOpacity activeOpacity={0.5} onPress={this.props.onPressCoupon}>
... ... @@ -48,6 +36,27 @@ export default class CouponCell extends React.Component {
</TouchableOpacity>
);
}
render() {
let data = this.props.resource.toJS();
if (data.list == 0) {
return null;
}
return (
<View style={styles.viewStyle}>
<ListView
showsHorizontalScrollIndicator ={false}
horizontal={true}
renderRow={this.renderRow.bind(this)}
dataSource={this.dataSource.cloneWithRows(data.list)}
/>
</View>
);
}
};
let styles = StyleSheet.create({
... ...
... ... @@ -52,7 +52,7 @@ export default class Recommend extends React.Component {
renderHeader(){
let data = this.props.resource.toJS();
if (data === '') {
if (data.list.length == 0) {
return null;
}
return(
... ...
... ... @@ -10,7 +10,7 @@ const {
TouchableOpacity,
} = ReactNative;
export default class BrandStoreHeaderView extends React.Component {
export default class ShopTopBanner extends React.Component {
constructor(props) {
super (props);
... ...
... ... @@ -46,6 +46,7 @@ class BrandStoreContainer extends Component {
this._onPressBrandItem= this._onPressBrandItem.bind(this);
this._onPressOneRowTwoColImages= this._onPressOneRowTwoColImages.bind(this);
this._onPressRecommendItem= this._onPressRecommendItem.bind(this);
this._onPressFilter= this._onPressFilter.bind(this);
}
componentDidMount() {
... ... @@ -84,6 +85,10 @@ class BrandStoreContainer extends Component {
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
_onPressFilter(){
alert("_onPressFilter");
}
render() {
let {info, resource, coupon,productList} = this.props.brandStore;
console.log(this.props.brandStore);
... ... @@ -98,6 +103,7 @@ class BrandStoreContainer extends Component {
onPressBrandItem={this._onPressBrandItem}
onPressOneRowTwoColImages={this._onPressOneRowTwoColImages}
onPressRecommendItem={this._onPressRecommendItem}
onPressFilter={this._onPressFilter}
/>
);
}
... ...