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'; @@ -8,6 +8,7 @@ import SingleImage from './SingleImage';
8 import DetailText from './DetailText'; 8 import DetailText from './DetailText';
9 import GoodsCell from './GoodsCell'; 9 import GoodsCell from './GoodsCell';
10 import Header from './Header'; 10 import Header from './Header';
  11 +import MoreLink from './MoreLink';
11 12
12 import ReactNative, { 13 import ReactNative, {
13 View, 14 View,
@@ -77,12 +78,11 @@ export default class Detail extends Component { @@ -77,12 +78,11 @@ export default class Detail extends Component {
77 return ( 78 return (
78 <GoodsCell resource={rowData}/> 79 <GoodsCell resource={rowData}/>
79 ); 80 );
80 - }else if (template_name == 'moreLink') { 81 + }else if (template_name == 'link') {
81 return ( 82 return (
82 - <Text>moreLink</Text> 83 + <MoreLink resource={rowData}/>
83 ); 84 );
84 } 85 }
85 -  
86 }else if (sectionID == 'detailBrand') { 86 }else if (sectionID == 'detailBrand') {
87 return ( 87 return (
88 <DetailBrand resource={rowData}/> 88 <DetailBrand resource={rowData}/>
@@ -108,7 +108,7 @@ export default class Detail extends Component { @@ -108,7 +108,7 @@ export default class Detail extends Component {
108 weixin, 108 weixin,
109 } = resource; 109 } = resource;
110 let list = content?content.get('data'):[]; 110 let list = content?content.get('data'):[];
111 - 111 +console.log(list.toJS());
112 let dataSource = { 112 let dataSource = {
113 detailList: list.size?list.toArray():[], 113 detailList: list.size?list.toArray():[],
114 detailBrand: [brand], 114 detailBrand: [brand],
@@ -54,6 +54,7 @@ export default class GoodsCell extends React.Component { @@ -54,6 +54,7 @@ export default class GoodsCell extends React.Component {
54 renderHeader() { 54 renderHeader() {
55 return( 55 return(
56 <View style={styles.titleB}> 56 <View style={styles.titleB}>
  57 + <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
57 <View style={styles.title}> 58 <View style={styles.title}>
58 <Text style={styles.text}>相关推荐</Text> 59 <Text style={styles.text}>相关推荐</Text>
59 </View> 60 </View>
@@ -65,26 +66,63 @@ export default class GoodsCell extends React.Component { @@ -65,26 +66,63 @@ export default class GoodsCell extends React.Component {
65 let {resource} = this.props; 66 let {resource} = this.props;
66 let list = resource.get('productList'); 67 let list = resource.get('productList');
67 68
68 - if (list.size == 0) { 69 + if (!list || list.size == 0) {
69 return null; 70 return null;
70 } 71 }
  72 + if (list.size == 1) {
  73 + let backgroundWidth = width;
  74 + let backgroundHeight = 40 + 80;
  75 + let list0 = list.toJS();
  76 + let obj = list0[0];
  77 + let product_name = obj.product_name;
  78 + let default_images = obj.default_images;
  79 + let sales_price = obj.sales_price;
71 80
72 - let backgroundWidth = width;  
73 - let backgroundHeight = 40 + Math.ceil(list.size / 2) * (rowHeight+rowMarginHorizontal) + 20;  
74 - return(  
75 - <View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>  
76 - <ListView  
77 - contentContainerStyle={styles.contentContainer}  
78 - initialListSize={Math.ceil(list.size)}  
79 - dataSource={this.dataSource.cloneWithRows(list.toArray())}  
80 - renderHeader={this.renderHeader}  
81 - enableEmptySections={true}  
82 - renderRow={this.renderRow}  
83 - scrollEnabled={false}  
84 - scrollsToTop={false}  
85 - />  
86 - </View>  
87 - ); 81 + console.log(obj);
  82 + return(
  83 + <View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
  84 + <View style={styles.titleB}>
  85 + <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
  86 + <View style={styles.title}>
  87 + <Text style={styles.text}>相关推荐</Text>
  88 + </View>
  89 + </View>
  90 + <View style={styles.single_View}>
  91 + <Image source={{uri: default_images}} style={styles.timeThumb} resizeMode={'contain'}></Image>
  92 + <View style={styles.nameView}>
  93 + <Text style={styles.name}>{product_name}</Text>
  94 + <View style={styles.salesView}>
  95 + <Text style={styles.sales}>¥{sales_price}</Text>
  96 + <TouchableOpacity activeOpacity={0.5} onPress={() => {
  97 + // this.props.onPressBrandItem && this.props.onPressBrandItem(rowData.url, rowID);
  98 + }}>
  99 + <View style={styles.button}>
  100 + <Text style={styles.b}>查看详情</Text>
  101 + </View>
  102 + </TouchableOpacity>
  103 + </View>
  104 + </View>
  105 + </View>
  106 + </View>
  107 + );
  108 + }else {
  109 + let backgroundWidth = width;
  110 + let backgroundHeight = 40 + Math.ceil(list.size / 2) * (rowHeight+rowMarginHorizontal) + 20;
  111 + return(
  112 + <View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
  113 + <ListView
  114 + contentContainerStyle={styles.contentContainer}
  115 + initialListSize={Math.ceil(list.size)}
  116 + dataSource={this.dataSource.cloneWithRows(list.toArray())}
  117 + renderHeader={this.renderHeader}
  118 + enableEmptySections={true}
  119 + renderRow={this.renderRow}
  120 + scrollEnabled={false}
  121 + scrollsToTop={false}
  122 + />
  123 + </View>
  124 + );
  125 + }
88 } 126 }
89 }; 127 };
90 128
@@ -113,8 +151,56 @@ let styles = StyleSheet.create({ @@ -113,8 +151,56 @@ let styles = StyleSheet.create({
113 title: { 151 title: {
114 alignItems: 'center', 152 alignItems: 'center',
115 justifyContent: 'center', 153 justifyContent: 'center',
116 - height: 39, 154 + height: 39.5,
117 width:width, 155 width:width,
118 - backgroundColor: 'red',  
119 }, 156 },
  157 + text: {
  158 + color: 'rgb(215, 215, 215)',
  159 + },
  160 + single_View: {
  161 + height: 80,
  162 + width:width,
  163 + backgroundColor: 'white',
  164 + flexDirection: 'row',
  165 + },
  166 + nameView: {
  167 + height: 80,
  168 + width:width,
  169 + backgroundColor: 'white',
  170 + },
  171 + name: {
  172 + marginTop: 30,
  173 + marginLeft:15,
  174 + height: 20,
  175 + width:width,
  176 + backgroundColor: 'white',
  177 + },
  178 + salesView: {
  179 + flexDirection: 'row',
  180 + justifyContent: 'space-between',
  181 + height: 20,
  182 + width:width - 80,
  183 + backgroundColor: 'white',
  184 + },
  185 + sales: {
  186 + height: 20,
  187 + width: 100,
  188 + marginLeft: 15,
  189 + backgroundColor: 'white',
  190 + },
  191 + button: {
  192 + height: 20,
  193 + width: 60,
  194 + backgroundColor: 'white',
  195 + alignItems: 'center',
  196 + justifyContent: 'center',
  197 + borderColor: 'black',
  198 + borderWidth: 1,
  199 + borderRadius: 2,
  200 + },
  201 + timeThumb: {
  202 + marginLeft: 20,
  203 + height: 80,
  204 + width:40,
  205 + },
120 }); 206 });
@@ -52,19 +52,24 @@ export default class Header extends React.Component { @@ -52,19 +52,24 @@ export default class Header extends React.Component {
52 52
53 return( 53 return(
54 <View style={styles.contentContainer}> 54 <View style={styles.contentContainer}>
55 - <View style={styles.header}>  
56 - <Image source={{uri: author_avatar}} style={styles.thumb}></Image>  
57 - <Text style={styles.name}>{author_name}</Text>  
58 - <Text style={styles.desc}>{author_desc}</Text>  
59 - </View> 55 + <TouchableOpacity activeOpacity={0.5} onPress={() => {
  56 + // this.props.onPressBrandItem && this.props.onPressBrandItem(rowData.url, rowID);
  57 + }}>
  58 + <View style={styles.header}>
  59 + <Image source={{uri: author_avatar}} style={styles.thumb}></Image>
  60 + <Text style={styles.name}>{author_name}</Text>
  61 + <Text style={styles.desc}>{author_desc}</Text>
  62 + </View>
  63 + </TouchableOpacity>
60 <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/> 64 <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
61 <Text style={styles.article_title}>{article_title}</Text> 65 <Text style={styles.article_title}>{article_title}</Text>
62 <View style={styles.time}> 66 <View style={styles.time}>
63 - <Image source={require('../../image/time_icon.png')} style={styles.timeThumb}></Image> 67 + <Image source={require('../../image/time_icon.png')} style={styles.timeThumb}resizeMode={'contain'}></Image>
64 <Text style={styles.text}>{publishTime}</Text> 68 <Text style={styles.text}>{publishTime}</Text>
65 - <Image source={require('../../image/time_icon.png')} style={styles.timeThumb}></Image> 69 + <Image source={require('../../image/shared_view_icon.png')} style={styles.timeThumb}resizeMode={'contain'}></Image>
66 <Text style={styles.text}>{pageViews}</Text> 70 <Text style={styles.text}>{pageViews}</Text>
67 </View> 71 </View>
  72 + <View style={{width: width,height: 10}}/>
68 </View> 73 </View>
69 ); 74 );
70 } 75 }
@@ -114,7 +119,7 @@ let styles = StyleSheet.create({ @@ -114,7 +119,7 @@ let styles = StyleSheet.create({
114 timeThumb: { 119 timeThumb: {
115 marginLeft: 20, 120 marginLeft: 20,
116 height: 12, 121 height: 12,
117 - width:12, 122 + width:20,
118 }, 123 },
119 text: { 124 text: {
120 marginLeft: 5, 125 marginLeft: 5,
  1 +'use strict';
  2 +
  3 +import React from 'react';
  4 +import ReactNative from 'react-native';
  5 +import Immutable, {Map} from 'immutable';
  6 +
  7 +const {
  8 + AppRegistry,
  9 + StyleSheet,
  10 + Text,
  11 + View,
  12 + Image,
  13 + ListView,
  14 + Dimensions,
  15 + TouchableOpacity,
  16 +} = ReactNative;
  17 +
  18 +
  19 +export default class MoreLink extends React.Component {
  20 + constructor(props) {
  21 + super(props);
  22 + }
  23 +
  24 + shouldComponentUpdate(nextProps){
  25 + if (Immutable.is(nextProps.resource, this.props.resource)) {
  26 + return false;
  27 + } else {
  28 + return true;
  29 + }
  30 + }
  31 +
  32 +
  33 + render() {
  34 + let {resource} = this.props;
  35 + let data = resource.get('data');
  36 + let url = data?data.get('url'):null;
  37 + return(
  38 + <TouchableOpacity activeOpacity={0.5} onPress={() => {
  39 + // this.props.onPressBrandItem && this.props.onPressBrandItem(rowData.url, rowID);
  40 + }}>
  41 + <View style={styles.titleB}>
  42 + <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
  43 + <View style={styles.title}>
  44 + <Text style={styles.text}>更多商品</Text>
  45 + <Image source={require('../../image/community_enter_normal.png')} style={styles.timeThumb}></Image>
  46 + </View>
  47 + <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
  48 + </View>
  49 + </TouchableOpacity>
  50 + );
  51 + }
  52 +
  53 +};
  54 +
  55 +
  56 +let {width, height} = Dimensions.get('window');
  57 +
  58 +let styles = StyleSheet.create({
  59 + titleB: {
  60 + alignItems: 'center',
  61 + justifyContent: 'center',
  62 + height: 40,
  63 + width:width,
  64 + backgroundColor: 'white',
  65 + },
  66 + title: {
  67 + flexDirection: 'row',
  68 + alignItems: 'center',
  69 + marginLeft: 20,
  70 + height: 39,
  71 + width:width - 20,
  72 + justifyContent: 'space-between',
  73 + backgroundColor: 'white',
  74 + },
  75 + text: {
  76 + color: 'rgb(215, 215, 215)',
  77 + },
  78 + timeThumb: {
  79 + height: 40,
  80 + width:40,
  81 + },
  82 +});
  1 +/*
  2 + * 明星原创--资讯组件
  3 + * create by 陈林 2016.12.13
  4 + */
  5 +
  6 +'use strict';
  7 +
  8 +import React, {Component} from 'react';
  9 +import ReactNative, {
  10 + View,
  11 + Text,
  12 + Image,
  13 + TouchableOpacity,
  14 + Dimensions,
  15 + NativeAppEventEmitter,
  16 + StyleSheet,
  17 +} from 'react-native';
  18 +import {SlicedImage} from '../../../common/components/SlicedImage';
  19 +
  20 +
  21 +
  22 +export default class BrandArticleCell extends Component {
  23 +
  24 + constructor(props) {
  25 + super(props);
  26 + this._renderTimeAndVisit = this._renderTimeAndVisit.bind(this);
  27 +
  28 + }
  29 +
  30 + componentDidMount() {
  31 +
  32 + }
  33 +
  34 +
  35 + //内容
  36 + _renderTimeAndVisit(time, visit, likeNum, isliked){
  37 +
  38 + return (
  39 + <View style={styles.timebar}>
  40 + <Text style={styles.time} numberOfLines={1}>{time}&nbsp;&nbsp;&nbsp;&nbsp;</Text>
  41 +
  42 + <Text style={styles.time} numberOfLines={1}>{visit}&nbsp;&nbsp;&nbsp;&nbsp;</Text>
  43 +
  44 + <Text style={styles.time} numberOfLines={1}>{likeNum}</Text>
  45 +
  46 +
  47 + </View>
  48 + );
  49 +
  50 + }
  51 +
  52 +
  53 + render() {
  54 + let {rowData} = this.props;
  55 + //标题
  56 + let title = rowData.get('title');
  57 + //图片
  58 + let imgUrl = rowData.get('src').replace('{mode}', 2).replace('{width}', 290).replace('{height}', 386);
  59 + //imgUrl = SlicedImage.getSlicedUrl(rowData.get('src'), 290, 386, 2);
  60 + //介绍
  61 + let intro = rowData.get('intro');
  62 + //发布时间
  63 + let publishTime = rowData.get('publish_time');
  64 + //访问次数
  65 + let viewsNum = rowData.get('views_num');
  66 + //喜欢信息
  67 + let like = rowData.get('like');
  68 + //是否喜欢
  69 + let isLiked = like.get("isLiked");
  70 + //喜欢人数
  71 + let likeCount = like.get("count");
  72 +
  73 + //console.log("chenlin444", JSON.stringify(rowData));
  74 + //console.log("chenlin444", "isLiked" + isLiked + "----likeCount" + likeCount);
  75 +
  76 +
  77 + return (
  78 + <View style={styles.cellContainer}>
  79 +
  80 + <TouchableOpacity
  81 + style={[styles.touchableContainer]}
  82 + activeOpacity={1}
  83 + onPress={()=>{
  84 + this.props.onPressTopic && this.props.onPressTopic()
  85 + }}>
  86 +
  87 + <Image style={styles.image} source={{uri:imgUrl}} />
  88 +
  89 + <Text style={styles.title}>{title}</Text>
  90 +
  91 + </TouchableOpacity>
  92 +
  93 + <Text style={styles.content} numberOfLines={4}>{intro}</Text>
  94 +
  95 + {this._renderTimeAndVisit(publishTime, viewsNum, likeCount, isLiked)}
  96 +
  97 +
  98 + </View>
  99 + );
  100 + }
  101 +}
  102 +
  103 +let {width, height} = Dimensions.get('window');
  104 +
  105 +let styles = StyleSheet.create({
  106 + cellContainer: {
  107 + width: width,
  108 + backgroundColor: '#ffffff',
  109 + },
  110 + touchableContainer: {
  111 + width: width,
  112 + },
  113 + image: {
  114 + width: width,
  115 + height: width / 1.5,
  116 + },
  117 +
  118 +
  119 + title:{
  120 + width: width,
  121 + fontSize: 20,
  122 + fontWeight: 'bold',
  123 + paddingLeft: 15,
  124 + paddingRight: 15,
  125 + paddingTop:10,
  126 + paddingBottom:5,
  127 + },
  128 + content:{
  129 + width: width,
  130 + fontSize: 15,
  131 + color: '#999999',
  132 + paddingLeft: 15,
  133 + paddingRight: 15,
  134 + paddingBottom:5,
  135 + },
  136 + timebar:{
  137 + width: width,
  138 + flexDirection: 'row',
  139 + paddingLeft: 15,
  140 + paddingRight: 15,
  141 + paddingBottom:5,
  142 + },
  143 + time:{
  144 + fontSize: 9,
  145 + color: '#b0b0b0',
  146 + },
  147 +});
  1 +/*
  2 + * 明星原创--资讯列表
  3 + * create by 陈林 2016.12.14
  4 + */
  5 +
  6 +'use strict';
  7 +
  8 +import React, {Component} from 'react';
  9 +import ReactNative, {
  10 + View,
  11 + Text,
  12 + Image,
  13 + ListView,
  14 + StyleSheet,
  15 + Dimensions,
  16 + TouchableOpacity,
  17 +} from 'react-native';
  18 +
  19 +//import SlicedImage from '../../../common/components/SlicedImage';
  20 +import BrandArticleCell from './BrandArticleCell';
  21 +
  22 +export default class BrandArticleList extends Component {
  23 +
  24 + constructor(props) {
  25 + super(props);
  26 +
  27 + this._renderRow = this._renderRow.bind(this);
  28 + this._renderHeader = this._renderHeader.bind(this);
  29 +
  30 + this.dataSource = new ListView.DataSource({
  31 + rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
  32 + });
  33 +
  34 + }
  35 +
  36 + _renderHeader(){
  37 + return(
  38 + <Text style={styles.headerText}>相关资讯</Text>
  39 + );
  40 + }
  41 +
  42 + _renderRow(rowData, sectionID, rowID, highlightRow) {
  43 +
  44 + return (
  45 + <BrandArticleCell
  46 + // style={[styles.listContainer, customStyle]}
  47 + key={'row' + rowID}
  48 + rowID={rowID}
  49 + rowData={rowData}
  50 + // onPressProduct={this.props.onPressProduct}
  51 + />
  52 +
  53 + );
  54 + }
  55 +
  56 + _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
  57 + return (
  58 + <View key={'sep' + rowID} style={styles.separator}></View>
  59 + );
  60 + }
  61 +
  62 + render() {
  63 + let {articleList} = this.props;
  64 +
  65 + return (
  66 + <View style={styles.container}>
  67 +
  68 + <ListView
  69 + contentContainerStyle={styles.contentContainer}
  70 + dataSource={this.dataSource.cloneWithRows(articleList.toArray())}
  71 + renderRow={this._renderRow}
  72 + enableEmptySections = {true}
  73 + renderSeparator={this._renderSeparator}
  74 + //renderHeader={this._renderHeader}
  75 + />
  76 +
  77 + </View>
  78 + );
  79 + }
  80 +}
  81 +
  82 +let {width, height} = Dimensions.get('window');
  83 +let rowWidth = Math.ceil(137.5 * width / 320);
  84 +let rowHeight = Math.ceil(254 * width / 320);
  85 +let rowMarginTop = Math.ceil(10 * width / 320);
  86 +
  87 +let styles = StyleSheet.create({
  88 + container: {
  89 + flex: 1,
  90 + backgroundColor: 'white',
  91 + },
  92 + contentContainer: {
  93 + flexWrap: 'wrap',
  94 + },
  95 + filterContainer: {
  96 +
  97 + },
  98 + listContainer: {
  99 + width: width / 2,
  100 + },
  101 + separator: {
  102 + width,
  103 + height: 20,
  104 + backgroundColor: '#e0e0e0',
  105 + },
  106 +
  107 + headerText:{
  108 + width,
  109 + marginLeft: 29,
  110 + marginRight: 29,
  111 + borderColor: '#e0e0e0',
  112 + borderBottomWidth: 0,
  113 + lineHeight: 36,
  114 + fontSize: 30,
  115 + color: '#b0b0b0',
  116 + alignItems: 'center',
  117 + justifyContent: 'center',
  118 + backgroundColor: "#ffffff",
  119 + },
  120 +});
@@ -16,6 +16,9 @@ import {connect} from 'react-redux'; @@ -16,6 +16,9 @@ import {connect} from 'react-redux';
16 import {Map} from 'immutable'; 16 import {Map} from 'immutable';
17 import * as detailActions from '../reducers/detail/detailActions'; 17 import * as detailActions from '../reducers/detail/detailActions';
18 import BrandIntro from '../components/detail/BrandIntro' 18 import BrandIntro from '../components/detail/BrandIntro'
  19 +import BrandArticleList from '../components/detail/BrandArticleList'
  20 +import BrandArticleCell from '../components/detail/BrandArticleCell'
  21 +
19 22
20 const actions = [ 23 const actions = [
21 detailActions, 24 detailActions,
@@ -57,11 +60,15 @@ class DetailContainer extends Component { @@ -57,11 +60,15 @@ class DetailContainer extends Component {
57 60
58 render() { 61 render() {
59 let {detail} = this.props; 62 let {detail} = this.props;
  63 + //console.log("chenlin", JSON.stringify(detail));
60 return ( 64 return (
61 <View style={styles.container}> 65 <View style={styles.container}>
62 <BrandIntro 66 <BrandIntro
63 brandIntro={detail.get('brandInfo')} 67 brandIntro={detail.get('brandInfo')}
64 /> 68 />
  69 +
  70 + <BrandArticleList
  71 + articleList={detail.get('articleList')} />
65 </View> 72 </View>
66 ); 73 );
67 } 74 }