mobile / YH_RNComponent · Commits

Go to a project

Authored by shangjf
Commit a03e90f7671abd041c399a3432001732078d5d2c 1 parent e9a070b2

添加首页空白页 review by 鹿亮亮

Inline Side-by-side
Showing 8 changed files with 210 additions and 83 deletions
... ... @@ -49,6 +49,7 @@ import ActivityProductFloor from '../floor/ActivityProductFloor';
import HotCategoryIndividualization from '../floor/HotCategoryIndividualization';
import ProductListCell from '../../../common/components/ListCell/ProductListCell';
import RecommendPopView from './RecommendPopView';
import NetWorkView from './NetWorkView';
export default class Home extends Component {
... ... @@ -479,9 +480,11 @@ export default class Home extends Component {
render() {
let channel = this.props.channel;
let data = this._currentChannelData();
let {isFetching, recommendProduct} = data;
let {isFetching, recommendProduct, list, cached, isFirstLoad} = data;
let dataSource = floorParser.homeDataParse(data, channel);
let floorList = list.size > 0 ? list.toArray() : cached.get('list').toArray();
let isPullToRefresh = isFetching;
let recommendData = recommendProduct.get('list').toArray();
... ... @@ -493,90 +496,100 @@ export default class Home extends Component {
recommendVisible = false;
}
let isShowEmpty = floorList.size === 0 && !isFirstLoad;
let isShowWait = isShowEmpty && isFetching;
return (
<View style={styles.container}>
{
Platform.OS === 'ios' ?
<ListView
ref={(c) => {
this.listView = c;
}}
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this._renderRow}
renderSectionHeader={this._renderSectionHeader}
removeClippedSubviews={true}
enableEmptySections={true}
enablePullToRefresh={true}
isOnPullToRefresh={isPullToRefresh}
onRefreshData={() => {
this.props.onRefresh && this.props.onRefresh();
}}
onEndReached={() => {
this.props.onEndReached && this.props.onEndReached();
}}
renderFooter={this._renderFooter}
onScroll={this._onScroll}
/>
:
<ListView
ref={(c) => {
this.listView = c;
}}
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this._renderRow}
renderSectionHeader={this._renderSectionHeader}
removeClippedSubviews={true}
enableEmptySections={true}
enablePullToRefresh={true}
isOnPullToRefresh={isPullToRefresh}
initialListSize={30}
pageSize={30}
refreshControl={
<RefreshControl
refreshing={isPullToRefresh}
onRefresh={() => {
this.props.onRefresh && this.props.onRefresh();
}}
colors={['#000000', '#ff0000']}
progressBackgroundColor="#ffffff"
/>
}
onEndReached={() => {
this.props.onEndReached && this.props.onEndReached();
}}
renderFooter={this._renderFooter}
onScroll={this._onScroll}
/>
}
<RecommendPopView
data={recommendData}
isVisible={recommendVisible}
onPress={()=>{
this._autoScrollToProductList();
}}
isShowEmpty ?
<NetWorkView
onPress={this.props.onPressReloadData}
showWait={isShowWait}
/>
:
<View style={styles.container}>
{
Platform.OS === 'ios' ?
<ListView
ref={(c) => {
this.listView = c;
}}
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this._renderRow}
renderSectionHeader={this._renderSectionHeader}
removeClippedSubviews={true}
enableEmptySections={true}
enablePullToRefresh={true}
isOnPullToRefresh={isPullToRefresh}
onRefreshData={() => {
this.props.onRefresh && this.props.onRefresh();
}}
onEndReached={() => {
this.props.onEndReached && this.props.onEndReached();
}}
renderFooter={this._renderFooter}
onScroll={this._onScroll}
/>
:
<ListView
ref={(c) => {
this.listView = c;
}}
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this._renderRow}
renderSectionHeader={this._renderSectionHeader}
removeClippedSubviews={true}
enableEmptySections={true}
enablePullToRefresh={true}
isOnPullToRefresh={isPullToRefresh}
initialListSize={30}
pageSize={30}
refreshControl={
<RefreshControl
refreshing={isPullToRefresh}
onRefresh={() => {
this.props.onRefresh && this.props.onRefresh();
}}
colors={['#000000', '#ff0000']}
progressBackgroundColor="#ffffff"
/>
}
onEndReached={() => {
this.props.onEndReached && this.props.onEndReached();
}}
renderFooter={this._renderFooter}
onScroll={this._onScroll}
/>
}
{
this.state.showBackTop ?
<TouchableOpacity
activeOpacity={1}
onPress={() =>{
this._backTop();
<RecommendPopView
data={recommendData}
isVisible={recommendVisible}
onPress={()=>{
this._autoScrollToProductList();
}}
>
<Image
style={styles.backTop}
source={require('../../images/backToTop.png')}
/>
</TouchableOpacity>
:
<View/>
}
/>
{
this.state.showBackTop ?
<TouchableOpacity
activeOpacity={1}
onPress={() =>{
this._backTop();
}}
>
<Image
style={styles.backTop}
source={require('../../images/backToTop.png')}
/>
</TouchableOpacity>
:
<View/>
}
</View>
</View>
);
}
}
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
Image,
StyleSheet,
Dimensions,
TouchableOpacity,
Platform,
} from 'react-native';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
export default class NetWorkView extends Component {
constructor(props) {
super(props);
this.state = {showWait: false};
}
render() {
let isShowLoading = this.props.showWait;
return (
<View style={styles.container}>
<Image
style={styles.icon}
source={require('../../images/loadingicon.png')}
/>
<Text
style={styles.desc}
>
您手机的网络不太顺畅哦！
</Text>
<TouchableOpacity
activeOpacity={1}
onPress={() =>{
this.setState({showWait: true});
this.props.onPress&&this.props.onPress();
}}
>
<View style={styles.reloadContainer}>
<Image
style={styles.reloadImage}
source={require('../../images/btnsemptyp.png')}
/>
<Text
style={styles.reloadText}
>
重新加载
</Text>
</View>
</TouchableOpacity>
<LoadingIndicator
isVisible={isShowLoading}
/>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
icon: {
width: 85,
height: 85,
},
desc: {
color: '#020202',
fontSize: 13,
marginTop: 23,
backgroundColor: 'transparent',
},
reloadContainer: {
marginTop: 63,
width: 237,
height: 45,
backgroundColor: 'transparent',
justifyContent: 'center',
flexDirection: 'column',
},
reloadImage: {
position: 'absolute',
left: 0,
top: 0,
width: 237,
height: 45,
borderRadius: 5
},
reloadText: {
alignSelf: 'center',
color: 'white',
fontSize: 15,
backgroundColor: 'transparent'
}
});
... ...
... ... @@ -75,7 +75,7 @@ class HomeContainer extends Component {
this.onPressDislike = this.onPressDislike.bind(this);
this.onPressProductListProduct = this.onPressProductListProduct.bind(this);
this.onPressToProductDetail = this.onPressToProductDetail.bind(this);
this.onPressReloadData = this.onPressReloadData.bind(this);
this.subscription = NativeAppEventEmitter.addListener(
'ChannelDidChangeEvent',
... ... @@ -243,6 +243,10 @@ class HomeContainer extends Component {
this.props.actions.selecLifeStyleProductIndex(index);
}
onPressReloadData() {
this.props.actions.fetchFloor();
}
render() {
let {app, home} = this.props;
return (
... ... @@ -280,6 +284,7 @@ class HomeContainer extends Component {
onPressProductListProduct={this.onPressProductListProduct}
onClickRecommendProduct={this.onClickRecommendProduct}
onPressToProductDetail={this.onPressToProductDetail}
onPressReloadData={this.onPressReloadData}
/>
</View>
);
... ...
... ... @@ -54,7 +54,7 @@ function calcluateFloorHeight(payload) {
let padding = count == 4 ? padding4 : padding5;
floorHeight = (count == 4 ? 84 : 75) * lineNumber + padding * (lineNumber - 1) + 12;
break;
}
}
case 'app_hot_brands': {
let listLength = data.list.length;
let lineNumber = parseInt((listLength + 3) / 4);
... ... @@ -171,7 +171,7 @@ function calcluateFloorHeight(payload) {
let leftBigImageWidth = width * 310 / 740;
let leftBigImageHeight = leftBigImageWidth * 422 / 310;
let containerHeight = headerHeight + leftBigImageHeight;
if(item.big_image.length > 0){
if(data.big_image.length > 0){
containerHeight = containerHeight + bannerHeight;
}
floorHeight = containerHeight;
... ...