mobile / YH_RNComponent · Commits

Go to a project

Authored by Kennaki
Commit 44418a27e9d2984c657962f74d4c497f0d2f3038 2 parents c3891b0a f23c0ab4

Merge branch 'guang' of http://git.yoho.cn/mobile/YH_RNComponent into guang

Inline Side-by-side
Showing 11 changed files with 478 additions and 31 deletions
... ... @@ -8,6 +8,7 @@ import SingleImage from './SingleImage';
import DetailText from './DetailText';
import GoodsCell from './GoodsCell';
import Header from './Header';
import MoreLink from './MoreLink';
import ReactNative, {
View,
... ... @@ -77,12 +78,11 @@ export default class Detail extends Component {
return (
<GoodsCell resource={rowData}/>
);
}else if (template_name == 'moreLink') {
}else if (template_name == 'link') {
return (
<Text>moreLink</Text>
<MoreLink resource={rowData}/>
);
}
}else if (sectionID == 'detailBrand') {
return (
<DetailBrand resource={rowData}/>
... ... @@ -108,7 +108,7 @@ export default class Detail extends Component {
weixin,
} = resource;
let list = content?content.get('data'):[];
console.log(list.toJS());
let dataSource = {
detailList: list.size?list.toArray():[],
detailBrand: [brand],
... ...
... ... @@ -54,6 +54,7 @@ export default class GoodsCell extends React.Component {
renderHeader() {
return(
<View style={styles.titleB}>
<View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
<View style={styles.title}>
<Text style={styles.text}>相关推荐</Text>
</View>
... ... @@ -65,26 +66,63 @@ export default class GoodsCell extends React.Component {
let {resource} = this.props;
let list = resource.get('productList');
if (list.size == 0) {
if (!list || list.size == 0) {
return null;
}
if (list.size == 1) {
let backgroundWidth = width;
let backgroundHeight = 40 + 80;
let list0 = list.toJS();
let obj = list0[0];
let product_name = obj.product_name;
let default_images = obj.default_images;
let sales_price = obj.sales_price;
let backgroundWidth = width;
let backgroundHeight = 40 + Math.ceil(list.size / 2) * (rowHeight+rowMarginHorizontal) + 20;
return(
<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
<ListView
contentContainerStyle={styles.contentContainer}
initialListSize={Math.ceil(list.size)}
dataSource={this.dataSource.cloneWithRows(list.toArray())}
renderHeader={this.renderHeader}
enableEmptySections={true}
renderRow={this.renderRow}
scrollEnabled={false}
scrollsToTop={false}
/>
</View>
);
console.log(obj);
return(
<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
<View style={styles.titleB}>
<View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
<View style={styles.title}>
<Text style={styles.text}>相关推荐</Text>
</View>
</View>
<View style={styles.single_View}>
<Image source={{uri: default_images}} style={styles.timeThumb} resizeMode={'contain'}></Image>
<View style={styles.nameView}>
<Text style={styles.name}>{product_name}</Text>
<View style={styles.salesView}>
<Text style={styles.sales}>¥{sales_price}</Text>
<TouchableOpacity activeOpacity={0.5} onPress={() => {
// this.props.onPressBrandItem && this.props.onPressBrandItem(rowData.url, rowID);
}}>
<View style={styles.button}>
<Text style={styles.b}>查看详情</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
);
}else {
let backgroundWidth = width;
let backgroundHeight = 40 + Math.ceil(list.size / 2) * (rowHeight+rowMarginHorizontal) + 20;
return(
<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
<ListView
contentContainerStyle={styles.contentContainer}
initialListSize={Math.ceil(list.size)}
dataSource={this.dataSource.cloneWithRows(list.toArray())}
renderHeader={this.renderHeader}
enableEmptySections={true}
renderRow={this.renderRow}
scrollEnabled={false}
scrollsToTop={false}
/>
</View>
);
}
}
};
... ... @@ -113,8 +151,56 @@ let styles = StyleSheet.create({
title: {
alignItems: 'center',
justifyContent: 'center',
height: 39,
height: 39.5,
width:width,
backgroundColor: 'red',
},
text: {
color: 'rgb(215, 215, 215)',
},
single_View: {
height: 80,
width:width,
backgroundColor: 'white',
flexDirection: 'row',
},
nameView: {
height: 80,
width:width,
backgroundColor: 'white',
},
name: {
marginTop: 30,
marginLeft:15,
height: 20,
width:width,
backgroundColor: 'white',
},
salesView: {
flexDirection: 'row',
justifyContent: 'space-between',
height: 20,
width:width - 80,
backgroundColor: 'white',
},
sales: {
height: 20,
width: 100,
marginLeft: 15,
backgroundColor: 'white',
},
button: {
height: 20,
width: 60,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
borderColor: 'black',
borderWidth: 1,
borderRadius: 2,
},
timeThumb: {
marginLeft: 20,
height: 80,
width:40,
},
});
... ...
... ... @@ -52,19 +52,24 @@ export default class Header extends React.Component {
return(
<View style={styles.contentContainer}>
<View style={styles.header}>
<Image source={{uri: author_avatar}} style={styles.thumb}></Image>
<Text style={styles.name}>{author_name}</Text>
<Text style={styles.desc}>{author_desc}</Text>
</View>
<TouchableOpacity activeOpacity={0.5} onPress={() => {
// this.props.onPressBrandItem && this.props.onPressBrandItem(rowData.url, rowID);
}}>
<View style={styles.header}>
<Image source={{uri: author_avatar}} style={styles.thumb}></Image>
<Text style={styles.name}>{author_name}</Text>
<Text style={styles.desc}>{author_desc}</Text>
</View>
</TouchableOpacity>
<View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
<Text style={styles.article_title}>{article_title}</Text>
<View style={styles.time}>
<Image source={require('../../image/time_icon.png')} style={styles.timeThumb}></Image>
<Image source={require('../../image/time_icon.png')} style={styles.timeThumb}resizeMode={'contain'}></Image>
<Text style={styles.text}>{publishTime}</Text>
<Image source={require('../../image/time_icon.png')} style={styles.timeThumb}></Image>
<Image source={require('../../image/shared_view_icon.png')} style={styles.timeThumb}resizeMode={'contain'}></Image>
<Text style={styles.text}>{pageViews}</Text>
</View>
<View style={{width: width,height: 10}}/>
</View>
);
}
... ... @@ -114,7 +119,7 @@ let styles = StyleSheet.create({
timeThumb: {
marginLeft: 20,
height: 12,
width:12,
width:20,
},
text: {
marginLeft: 5,
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
const {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
Dimensions,
TouchableOpacity,
} = ReactNative;
export default class MoreLink extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.resource, this.props.resource)) {
return false;
} else {
return true;
}
}
render() {
let {resource} = this.props;
let data = resource.get('data');
let url = data?data.get('url'):null;
return(
<TouchableOpacity activeOpacity={0.5} onPress={() => {
// this.props.onPressBrandItem && this.props.onPressBrandItem(rowData.url, rowID);
}}>
<View style={styles.titleB}>
<View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
<View style={styles.title}>
<Text style={styles.text}>更多商品</Text>
<Image source={require('../../image/community_enter_normal.png')} style={styles.timeThumb}></Image>
</View>
<View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
</View>
</TouchableOpacity>
);
}
};
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
titleB: {
alignItems: 'center',
justifyContent: 'center',
height: 40,
width:width,
backgroundColor: 'white',
},
title: {
flexDirection: 'row',
alignItems: 'center',
marginLeft: 20,
height: 39,
width:width - 20,
justifyContent: 'space-between',
backgroundColor: 'white',
},
text: {
color: 'rgb(215, 215, 215)',
},
timeThumb: {
height: 40,
width:40,
},
});
... ...
/*
* 明星原创--资讯组件
* create by 陈林 2016.12.13
*/
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
Image,
TouchableOpacity,
Dimensions,
NativeAppEventEmitter,
StyleSheet,
} from 'react-native';
import {SlicedImage} from '../../../common/components/SlicedImage';
export default class BrandArticleCell extends Component {
constructor(props) {
super(props);
this._renderTimeAndVisit = this._renderTimeAndVisit.bind(this);
}
componentDidMount() {
}
//内容
_renderTimeAndVisit(time, visit, likeNum, isliked){
return (
<View style={styles.timebar}>
<Text style={styles.time} numberOfLines={1}>{time}&nbsp;&nbsp;&nbsp;&nbsp;</Text>
<Text style={styles.time} numberOfLines={1}>{visit}&nbsp;&nbsp;&nbsp;&nbsp;</Text>
<Text style={styles.time} numberOfLines={1}>{likeNum}</Text>
</View>
);
}
render() {
let {rowData} = this.props;
//标题
let title = rowData.get('title');
//图片
let imgUrl = rowData.get('src').replace('{mode}', 2).replace('{width}', 290).replace('{height}', 386);
//imgUrl = SlicedImage.getSlicedUrl(rowData.get('src'), 290, 386, 2);
//介绍
let intro = rowData.get('intro');
//发布时间
let publishTime = rowData.get('publish_time');
//访问次数
let viewsNum = rowData.get('views_num');
//喜欢信息
let like = rowData.get('like');
//是否喜欢
let isLiked = like.get("isLiked");
//喜欢人数
let likeCount = like.get("count");
//console.log("chenlin444", JSON.stringify(rowData));
//console.log("chenlin444", "isLiked" + isLiked + "----likeCount" + likeCount);
return (
<View style={styles.cellContainer}>
<TouchableOpacity
style={[styles.touchableContainer]}
activeOpacity={1}
onPress={()=>{
this.props.onPressTopic && this.props.onPressTopic()
}}>
<Image style={styles.image} source={{uri:imgUrl}} />
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
<Text style={styles.content} numberOfLines={4}>{intro}</Text>
{this._renderTimeAndVisit(publishTime, viewsNum, likeCount, isLiked)}
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
cellContainer: {
width: width,
backgroundColor: '#ffffff',
},
touchableContainer: {
width: width,
},
image: {
width: width,
height: width / 1.5,
},
title:{
width: width,
fontSize: 20,
fontWeight: 'bold',
paddingLeft: 15,
paddingRight: 15,
paddingTop:10,
paddingBottom:5,
},
content:{
width: width,
fontSize: 15,
color: '#999999',
paddingLeft: 15,
paddingRight: 15,
paddingBottom:5,
},
timebar:{
width: width,
flexDirection: 'row',
paddingLeft: 15,
paddingRight: 15,
paddingBottom:5,
},
time:{
fontSize: 9,
color: '#b0b0b0',
},
});
... ...
/*
* 明星原创--资讯列表
* create by 陈林 2016.12.14
*/
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
Image,
ListView,
StyleSheet,
Dimensions,
TouchableOpacity,
} from 'react-native';
//import SlicedImage from '../../../common/components/SlicedImage';
import BrandArticleCell from './BrandArticleCell';
export default class BrandArticleList extends Component {
constructor(props) {
super(props);
this._renderRow = this._renderRow.bind(this);
this._renderHeader = this._renderHeader.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
});
}
_renderHeader(){
return(
<Text style={styles.headerText}>相关资讯</Text>
);
}
_renderRow(rowData, sectionID, rowID, highlightRow) {
return (
<BrandArticleCell
// style={[styles.listContainer, customStyle]}
key={'row' + rowID}
rowID={rowID}
rowData={rowData}
// onPressProduct={this.props.onPressProduct}
/>
);
}
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View key={'sep' + rowID} style={styles.separator}></View>
);
}
render() {
let {articleList} = this.props;
return (
<View style={styles.container}>
<ListView
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(articleList.toArray())}
renderRow={this._renderRow}
enableEmptySections = {true}
renderSeparator={this._renderSeparator}
//renderHeader={this._renderHeader}
/>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowHeight = Math.ceil(254 * width / 320);
let rowMarginTop = Math.ceil(10 * width / 320);
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
contentContainer: {
flexWrap: 'wrap',
},
filterContainer: {
},
listContainer: {
width: width / 2,
},
separator: {
width,
height: 20,
backgroundColor: '#e0e0e0',
},
headerText:{
width,
marginLeft: 29,
marginRight: 29,
borderColor: '#e0e0e0',
borderBottomWidth: 0,
lineHeight: 36,
fontSize: 30,
color: '#b0b0b0',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "#ffffff",
},
});
... ...
... ... @@ -16,6 +16,9 @@ import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as detailActions from '../reducers/detail/detailActions';
import BrandIntro from '../components/detail/BrandIntro'
import BrandArticleList from '../components/detail/BrandArticleList'
import BrandArticleCell from '../components/detail/BrandArticleCell'
const actions = [
detailActions,
... ... @@ -57,11 +60,15 @@ class DetailContainer extends Component {
render() {
let {detail} = this.props;
//console.log("chenlin", JSON.stringify(detail));
return (
<View style={styles.container}>
<BrandIntro
brandIntro={detail.get('brandInfo')}
/>
<BrandArticleList
articleList={detail.get('articleList')} />
</View>
);
}
... ...