mobile / YH_RNComponent · Commits

Go to a project

Authored by 张文文
Commit 983d3c88e2f9e493f89ae8694209d1a65ed3c5ea 1 parent 4f0c650d

添加关注、收藏cell

Inline Side-by-side
Showing 7 changed files with 468 additions and 26 deletions
  1 +/**
  2 + * Created by zzz on 2019/3/12.
  3 + */
  4 +'use strict';
  5 +
  6 +import React, {Component} from 'react';
  7 +import {Dimensions, Image, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
  8 +import {Immutable} from "immutable";
  9 +import YH_Image from '../../../common/components/YH_Image';
  10 +
  11 +export default class ContentFansListCell extends Component {
  12 + constructor(props) {
  13 + super(props);
  14 + }
  15 +
  16 + render() {
  17 + let ico = 'http://head.static.yhbimg.com/yhb-head/2018/07/02/16/01fc258bbe83d5b332f3b2631897b80ec9.591188.jpg?imageView2/{mode}/w/{width}/h/{height}';
  18 + let imageUrl = YH_Image.getSlicedUrl(ico, 50, 50, 2);
  19 +
  20 + function onHeadIconPress() {
  21 + console.log('onHeadIconPress');
  22 + }
  23 +
  24 + function onFanPress() {
  25 + console.log('onFanPress');
  26 + }
  27 +
  28 + return (
  29 + <View>
  30 + <View style={styles.headerBackground}>
  31 + <TouchableOpacity activeOpacity={1} onPress={()=> {onHeadIconPress()}}>
  32 + <YH_Image style={styles.headIcon} url={imageUrl} circle={true}/>
  33 + </TouchableOpacity>
  34 +
  35 + <View style={styles.textView}>
  36 + <Text>
  37 + <Text style={styles.nicknameText}>PINKA</Text>
  38 + <Text style={styles.defaultReplyText} numberOfLines={2}> 关注了你</Text>
  39 + </Text>
  40 + <Text style={styles.startTimeText}>{'2018.03.05 10:00:00'}</Text>
  41 + </View>
  42 + <TouchableOpacity activeOpacity={1} style={styles.fanContainer} onPress={()=> {onFanPress()}}>
  43 + <Image style={styles.fanImage} source={require('../../images/content_fan.png')}/>
  44 + </TouchableOpacity>
  45 + </View>
  46 + <View style={styles.lineView}/>
  47 + </View>
  48 + );
  49 + }
  50 +}
  51 +
  52 +let { width, height } = Dimensions.get('window');
  53 +const DEVICE_HEIGHT_RATIO = height / 667;
  54 +
  55 +let styles = StyleSheet.create({
  56 + headerBackground: {
  57 + width: width,
  58 + height: 80,
  59 + backgroundColor: 'white',
  60 + flexDirection: 'row',
  61 + },
  62 + headIcon: {
  63 + width: 50,
  64 + height: 50,
  65 + marginLeft: 15,
  66 + marginTop: 15,
  67 + marginRight:15,
  68 + overflow: 'hidden',
  69 + borderRadius: 25,
  70 + },
  71 + textView: {
  72 + flexDirection: 'column',
  73 + justifyContent: 'space-between',
  74 + alignItems: 'flex-start',
  75 + marginTop: 15,
  76 + marginBottom: 20,
  77 + },
  78 + startTimeText: {
  79 + fontFamily: 'PingFang-SC-Regular',
  80 + fontSize: 12,
  81 + color: '#B0B0B0',
  82 + height: 17
  83 + },
  84 + nicknameText: {
  85 + fontSize: 14,
  86 + fontFamily: 'PingFang-SC-Medium',
  87 + color: 'black',
  88 + fontWeight: 'bold'
  89 + },
  90 + fanContainer: {
  91 + position: 'absolute',
  92 + top: 27,
  93 + right: 15,
  94 + width: 60,
  95 + height: 25,
  96 + },
  97 + fanImage: {
  98 + width: 60,
  99 + height: 25,
  100 + },
  101 + lineView: {
  102 + marginLeft:15,
  103 + marginRight: 0,
  104 + width: width-15,
  105 + height: 1,
  106 + backgroundColor: '#e0e0e0'
  107 + },
  108 + });
  1 +/**
  2 + * Created by zzz on 2019/3/12.
  3 + */
  4 +'use strict';
  5 +
  6 +import React, {Component} from 'react';
  7 +import {Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
  8 +import {Immutable} from "immutable";
  9 +import YH_Image from '../../../common/components/YH_Image';
  10 +
  11 +export default class ContentLikedListCell extends Component {
  12 + constructor(props) {
  13 + super(props);
  14 + }
  15 +
  16 + render() {
  17 + let ico = 'http://head.static.yhbimg.com/yhb-head/2018/07/02/16/01fc258bbe83d5b332f3b2631897b80ec9.591188.jpg?imageView2/{mode}/w/{width}/h/{height}';
  18 + let picUrl = 'http://img10.static.yhbimg.com/unionimg/2018/09/11/16/012d77a863813f5789f7b9cb92a561ec87.jpg';
  19 + let imageUrl = YH_Image.getSlicedUrl(ico, 50, 50, 2);
  20 +
  21 + function onHeadIconPress() {
  22 +
  23 + }
  24 +
  25 + function onOriginPress() {
  26 +
  27 + }
  28 +
  29 + return (
  30 + <View>
  31 + <View style={styles.headerBackground}>
  32 + <TouchableOpacity activeOpacity={1} onPress={()=> {onHeadIconPress()}}>
  33 + <YH_Image style={styles.headIcon} url={imageUrl} circle={true}/>
  34 + </TouchableOpacity>
  35 +
  36 + <View style={styles.textView}>
  37 + <Text style={styles.nicknameText}>社区用户昵称</Text>
  38 + <Text style={styles.subnameText}>赞了你</Text>
  39 + </View>
  40 + </View>
  41 +
  42 + <TouchableOpacity activeOpacity={1} onPress={() => {onOriginPress()}}>
  43 + <View style={ styles.originView} >
  44 + <Text style={styles.copyText}>原文</Text>
  45 + <YH_Image url={picUrl} style={styles.imageStyle} />
  46 + <Text style={styles.originText} numberOfLines={1}>这款Acne Studios 推出全新「The Johnny Winter Project」系列的东西很好很不错呢，我也很喜欢，太棒了</Text>
  47 + </View>
  48 + </TouchableOpacity>
  49 +
  50 + <View style={styles.timeView}>
  51 + <Text style={styles.startTimeText}>{'2018.03.05'}</Text>
  52 + </View>
  53 + <View style={styles.lineView}/>
  54 + </View>
  55 + );
  56 + }
  57 +}
  58 +
  59 +let { width, height } = Dimensions.get('window');
  60 +const DEVICE_HEIGHT_RATIO = height / 667;
  61 +
  62 +let styles = StyleSheet.create({
  63 + headerBackground: {
  64 + width: width,
  65 + height: 70,
  66 + backgroundColor: 'white',
  67 + flexDirection: 'row',
  68 + },
  69 + headIcon: {
  70 + width: 40,
  71 + height: 40,
  72 + marginLeft: 15,
  73 + marginTop: 15,
  74 + marginRight:10,
  75 + overflow: 'hidden',
  76 + borderRadius: 20,
  77 + },
  78 + textView: {
  79 + flexDirection: 'column',
  80 + justifyContent: 'space-between',
  81 + alignItems: 'flex-start',
  82 + marginTop: 18,
  83 + marginBottom: 15,
  84 + },
  85 + nicknameText: {
  86 + fontSize: 14,
  87 + fontFamily: 'PingFang-SC-Medium',
  88 + color: '#222222',
  89 + },
  90 + subnameText: {
  91 + fontSize: 12,
  92 + fontFamily: 'PingFang-SC-Regular',
  93 + color: '#B0B0B0',
  94 + },
  95 + originView: {
  96 + flex: 1,
  97 + marginLeft: 15,
  98 + marginRight: 15,
  99 + marginBottom: 10,
  100 + backgroundColor: '#f0f0f0'
  101 + },
  102 + copyText: {
  103 + fontFamily: 'PingFang-SC-Regular',
  104 + fontSize: 12,
  105 + color: '#444444',
  106 + marginTop: 10,
  107 + marginLeft: 10,
  108 + },
  109 + imageStyle: {
  110 + marginTop: 10,
  111 + marginBottom: 4,
  112 + marginLeft: 10,
  113 + width: 50 * DEVICE_HEIGHT_RATIO,
  114 + height: 50 * DEVICE_HEIGHT_RATIO,
  115 + },
  116 + originText: {
  117 + fontFamily: 'PingFang-SC-Regular',
  118 + fontSize: 12,
  119 + color: '#b0b0b0',
  120 + marginLeft: 10,
  121 + marginRight: 15,
  122 + marginBottom: 9,
  123 + },
  124 + timeView: {
  125 + alignItems: 'flex-start',
  126 + marginBottom: 10,
  127 + marginLeft: 15,
  128 + },
  129 + startTimeText: {
  130 + fontFamily: 'PingFang-SC-Regular',
  131 + fontSize: 12,
  132 + color: '#B0B0B0',
  133 + height: 17
  134 + },
  135 + lineView: {
  136 + marginLeft:15,
  137 + marginRight: 0,
  138 + width: width-15,
  139 + height: 1,
  140 + backgroundColor: '#e0e0e0'
  141 + },
  142 + });
  1 +/**
  2 + * Created by zzz on 2019/3/12.
  3 + */
  4 +'use strict';
  5 +
  6 +import React, {Component} from 'react';
  7 +import {DeviceEventEmitter, Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
  8 +import {Immutable} from "immutable";
  9 +import YH_Image from '../../../common/components/YH_Image';
  10 +
  11 +export default class ContentMessageCellView extends Component {
  12 + constructor(props) {
  13 + super(props);
  14 + }
  15 +
  16 + render() {
  17 + let ico = 'http://head.static.yhbimg.com/yhb-head/2018/07/02/16/01fc258bbe83d5b332f3b2631897b80ec9.591188.jpg?imageView2/{mode}/w/{width}/h/{height}';
  18 + let picUrl = 'http://img10.static.yhbimg.com/unionimg/2018/09/11/16/012d77a863813f5789f7b9cb92a561ec87.jpg';
  19 + let imageUrl = YH_Image.getSlicedUrl(ico, 50, 50, 2);
  20 + let status = true;
  21 +
  22 + function onReplyPress() {
  23 + // NativeModules.YH_CommonHelper.showkeyBoardView();
  24 + }
  25 +
  26 + return (
  27 + <View>
  28 + <View style={styles.headerBackground}>
  29 + <YH_Image style={styles.headIcon} url={imageUrl} circle={true}/>
  30 + <View style={styles.textView}>
  31 + <Text style={styles.nicknameText}>社区用户昵称</Text>
  32 + <Text style={styles.subnameText}>赞了你</Text>
  33 + </View>
  34 + <TouchableOpacity activeOpacity={1} style={styles.replyContainer} onPress={()=> {onReplyPress()}}>
  35 + <Image style={styles.replyImage} source={require('../../images/content_reply.png')}/>
  36 + </TouchableOpacity>
  37 + </View>
  38 +
  39 + <View style={styles.replyTextView}>
  40 + <Text style={styles.replyText} numberOfLines={2}>这款Acne Studios 推出全新「The Johnny Winter Project」系列的东西很好很不错呢，我也很喜欢，太棒了</Text>
  41 + </View>
  42 +
  43 + { status ?
  44 +
  45 + <View style={styles.ownerReplyView}>
  46 + <Text style={{paddingLeft: 10, paddingTop: 14, paddingRight: 1, paddingBottom: 12}}>
  47 + <Text style={styles.replyText}>我的评论：</Text>
  48 + <Text style={styles.defaultReplyText} numberOfLines={2}>送你一颗小心心，这个鞋子也是我很想入的一款。非常酷棒极了，详情具体关注你的后续文章</Text>
  49 + </Text>
  50 + </View>
  51 +
  52 + :
  53 +
  54 + <TouchableOpacity activeOpacity={1} onPress={() => {}}>
  55 + <View style={ styles.originContainerView} >
  56 + <Text style={styles.copyText}>原文</Text>
  57 + <YH_Image url={picUrl} style={styles.imageStyle} />
  58 + <Text style={styles.originText} numberOfLines={1}>这款Acne Studios 推出全新「The Johnny Winter Project」系列的东西很好很不错呢，我也很喜欢，太棒了</Text>
  59 + </View>
  60 + </TouchableOpacity> }
  61 +
  62 + <View style={styles.timeView}>
  63 + <Text style={styles.startTimeText}>{'2018.03.05'}</Text>
  64 + </View>
  65 + <View style={styles.lineView}/>
  66 + </View>
  67 + );
  68 + }
  69 +}
  70 +
  71 +let { width, height } = Dimensions.get('window');
  72 +const DEVICE_WIDTH_RATIO = width / 375;
  73 +const DEVICE_HEIGHT_RATIO = height / 667;
  74 +
  75 +let styles = StyleSheet.create({
  76 + headerBackground: {
  77 + width: width,
  78 + height: 70,
  79 + backgroundColor: 'white',
  80 + flexDirection: 'row',
  81 + },
  82 + headIcon: {
  83 + width: 40,
  84 + height: 40,
  85 + marginLeft: 15,
  86 + marginTop: 15,
  87 + marginRight:10,
  88 + overflow: 'hidden',
  89 + borderRadius: 20,
  90 + },
  91 + textView: {
  92 + flexDirection: 'column',
  93 + justifyContent: 'space-between',
  94 + alignItems: 'flex-start',
  95 + marginTop: 18,
  96 + marginBottom: 15,
  97 + },
  98 + nicknameText: {
  99 + fontSize: 14,
  100 + fontFamily: 'PingFang-SC-Medium',
  101 + color: '#222222',
  102 + },
  103 + subnameText: {
  104 + fontSize: 12,
  105 + fontFamily: 'PingFang-SC-Regular',
  106 + color: '#B0B0B0',
  107 + },
  108 + replyContainer: {
  109 + position: 'absolute',
  110 + top: 23,
  111 + right: 15,
  112 + width: 60,
  113 + height: 25,
  114 + },
  115 + replyImage: {
  116 + width: 60,
  117 + height: 25,
  118 + },
  119 + replyTextView: {
  120 + width: width - 30,
  121 + marginBottom: 15,
  122 + marginLeft: 15,
  123 + },
  124 + replyText: {
  125 + fontFamily: 'PingFang-SC-Regular',
  126 + fontSize: 12,
  127 + color: '#444444',
  128 + },
  129 + ownerReplyView : {
  130 + flexDirection: 'row',
  131 + alignItems: 'center',
  132 + width: width - 30,
  133 + marginLeft: 15,
  134 + backgroundColor: '#F0F0F0',
  135 + marginBottom: 10,
  136 + },
  137 + defaultReplyText: {
  138 + fontFamily: 'PingFang-SC-Regular',
  139 + fontSize: 12,
  140 + color: '#a8a8a8',
  141 + },
  142 + originContainerView: {
  143 + flex: 1,
  144 + marginLeft: 15,
  145 + marginRight: 15,
  146 + marginBottom: 10,
  147 + backgroundColor: '#f0f0f0'
  148 + },
  149 + copyText: {
  150 + fontFamily: 'PingFang-SC-Regular',
  151 + fontSize: 12,
  152 + color: '#444444',
  153 + marginTop: 10,
  154 + marginLeft: 9,
  155 + },
  156 + imageStyle: {
  157 + marginTop: 10,
  158 + marginBottom: 4,
  159 + marginLeft: 9,
  160 + width: 50 * DEVICE_HEIGHT_RATIO,
  161 + height: 50 * DEVICE_HEIGHT_RATIO,
  162 + },
  163 + originText: {
  164 + fontFamily: 'PingFang-SC-Regular',
  165 + fontSize: 12,
  166 + color: '#b0b0b0',
  167 + marginLeft: 9,
  168 + marginRight: 16,
  169 + marginBottom: 9,
  170 + },
  171 + timeView: {
  172 + alignItems: 'flex-start',
  173 + marginBottom: 10,
  174 + marginLeft: 15,
  175 + },
  176 + startTimeText: {
  177 + fontFamily: 'PingFang-SC-Regular',
  178 + fontSize: 12,
  179 + color: '#B0B0B0',
  180 + height: 17
  181 + },
  182 + lineView: {
  183 + marginLeft:15,
  184 + marginRight: 0,
  185 + width: width-15,
  186 + height: 1,
  187 + backgroundColor: '#e0e0e0'
  188 + },
  189 + });
@@ -10,7 +10,7 @@ const INVALID_POSITION = -1; @@ -10,7 +10,7 @@ const INVALID_POSITION = -1;
10 const IMAGE_WIDTH = 50; 10 const IMAGE_WIDTH = 50;
11 const IMAGE_HEIGHT = 50; 11 const IMAGE_HEIGHT = 50;
12 12
13 -class ContentMessageTabItemView extends Component { 13 +export default class ContentMessageTabView extends Component {
14 constructor(props) { 14 constructor(props) {
15 super(props); 15 super(props);
16 this.state = { 16 this.state = {
@@ -115,6 +115,4 @@ let styles = StyleSheet.create({ @@ -115,6 +115,4 @@ let styles = StyleSheet.create({
115 color: 'white', 115 color: 'white',
116 fontWeight: 'bold', 116 fontWeight: 'bold',
117 } 117 }
118 -})  
119 -  
120 -export default ContentMessageTabItemView; 118 +});
@@ -3,23 +3,12 @@ @@ -3,23 +3,12 @@
3 */ 3 */
4 'use strict'; 4 'use strict';
5 import React, {Component} from "react"; 5 import React, {Component} from "react";
6 -import ReactNative, {  
7 - View,  
8 - Text,  
9 - Image,  
10 - ListView,  
11 - StyleSheet,  
12 - Dimensions,  
13 - TouchableOpacity,  
14 - InteractionManager,  
15 - Platform,  
16 - RefreshControl,  
17 - DeviceEventEmitter,  
18 - NativeModules 6 +import ReactNative, {View, Text, Image, ListView, StyleSheet, Dimensions, TouchableOpacity, Platform, RefreshControl, NativeModules
19 } from 'react-native'; 7 } from 'react-native';
20 import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh'; 8 import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh';
21 9
22 -import ContentMessageTabItemView from "./ContentMessageTabItemView"; 10 +import ContentMessageTabView from "./ContentMessageTabView";
  11 +import ContentMessageCell from "./ContentMessageCell";
23 12
24 export default class ContentMessageView extends Component { 13 export default class ContentMessageView extends Component {
25 constructor(props) { 14 constructor(props) {
@@ -34,13 +23,13 @@ export default class ContentMessageView extends Component { @@ -34,13 +23,13 @@ export default class ContentMessageView extends Component {
34 23
35 _renderRow(rowData, sectionID, rowID) { 24 _renderRow(rowData, sectionID, rowID) {
36 return ( 25 return (
37 - <View>  
38 -  
39 - </View> 26 + <ContentMessageCell
  27 + key={'row'+ rowID}
  28 + data={rowData}
  29 + />
40 ); 30 );
41 } 31 }
42 32
43 -  
44 _renderHeader() { 33 _renderHeader() {
45 let tipHeight = this.props.contentTipFlag==='0'?40:0; 34 let tipHeight = this.props.contentTipFlag==='0'?40:0;
46 let lineHeight = this.props.contentTipFlag==='0'?1:0; 35 let lineHeight = this.props.contentTipFlag==='0'?1:0;
@@ -86,7 +75,7 @@ export default class ContentMessageView extends Component { @@ -86,7 +75,7 @@ export default class ContentMessageView extends Component {
86 return <TouchableOpacity style={styles.tabItemContainer} key={index} onPress={()=> { 75 return <TouchableOpacity style={styles.tabItemContainer} key={index} onPress={()=> {
87 onPress(button.description, button.type) 76 onPress(button.description, button.type)
88 }}> 77 }}>
89 - <ContentMessageTabItemView icon={button.imgSource} title={button.description} badge={button.unReadCount}/> 78 + <ContentMessageTabView icon={button.imgSource} title={button.description} badge={button.unReadCount}/>
90 </TouchableOpacity> 79 </TouchableOpacity>
91 })} 80 })}
92 </View> 81 </View>
@@ -104,7 +93,25 @@ export default class ContentMessageView extends Component { @@ -104,7 +93,25 @@ export default class ContentMessageView extends Component {
104 } 93 }
105 94
106 render() { 95 render() {
107 - let listData = []; 96 + let listData = [{
  97 + date: 1542598633,
  98 + inviterUid: 500031912,
  99 + uid: 500027570,
  100 + orderAmount: 0.00,
  101 + dateStr: "2018.11.19",
  102 + name: "********27242140",
  103 + orderNum: 0,
  104 + orderAmountStr: "￥0.00"
  105 + }, {
  106 + date: 1539584520,
  107 + inviterUid: 500031912,
  108 + uid: 600032910,
  109 + orderAmount: 0.00,
  110 + dateStr: "2018.10.15",
  111 + name: "YOHO-1c3da9037",
  112 + orderNum: 0,
  113 + orderAmountStr: "￥0.00"
  114 + }];
108 115
109 return ( 116 return (
110 <View style={styles.container}> 117 <View style={styles.container}>
@@ -11,7 +11,6 @@ import ReactNative, { StyleSheet, Dimensions, Platform, View, Text, NativeModule @@ -11,7 +11,6 @@ import ReactNative, { StyleSheet, Dimensions, Platform, View, Text, NativeModule
11 import {bindActionCreators} from "redux"; 11 import {bindActionCreators} from "redux";
12 import {connect} from "react-redux"; 12 import {connect} from "react-redux";
13 import {Map} from "immutable"; 13 import {Map} from "immutable";
14 -import LoadingIndicator from '../../common/components/LoadingIndicator';  
15 import * as contentActions from "../reducers/content/contentActions"; 14 import * as contentActions from "../reducers/content/contentActions";
16 15
17 import ContentMessageView from '../components/content/ContentMessageView'; 16 import ContentMessageView from '../components/content/ContentMessageView';
@@ -74,7 +73,6 @@ class ContentMessageContainer extends Component { @@ -74,7 +73,6 @@ class ContentMessageContainer extends Component {
74 this.messageView = view 73 this.messageView = view
75 }} 74 }}
76 contentTipFlag={contentTipFlag}/> 75 contentTipFlag={contentTipFlag}/>
77 - <LoadingIndicator isVisible={isFetching}/>  
78 </View> 76 </View>
79 ) 77 )
80 } 78 }