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
/**
* Created by zzz on 2019/3/12.
*/
'use strict';
import React, {Component} from 'react';
import {Dimensions, Image, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
import {Immutable} from "immutable";
import YH_Image from '../../../common/components/YH_Image';
export default class ContentFansListCell extends Component {
constructor(props) {
super(props);
}
render() {
let ico = 'http://head.static.yhbimg.com/yhb-head/2018/07/02/16/01fc258bbe83d5b332f3b2631897b80ec9.591188.jpg?imageView2/{mode}/w/{width}/h/{height}';
let imageUrl = YH_Image.getSlicedUrl(ico, 50, 50, 2);
function onHeadIconPress() {
console.log('onHeadIconPress');
}
function onFanPress() {
console.log('onFanPress');
}
return (
<View>
<View style={styles.headerBackground}>
<TouchableOpacity activeOpacity={1} onPress={()=> {onHeadIconPress()}}>
<YH_Image style={styles.headIcon} url={imageUrl} circle={true}/>
</TouchableOpacity>
<View style={styles.textView}>
<Text>
<Text style={styles.nicknameText}>PINKA</Text>
<Text style={styles.defaultReplyText} numberOfLines={2}> 关注了你</Text>
</Text>
<Text style={styles.startTimeText}>{'2018.03.05 10:00:00'}</Text>
</View>
<TouchableOpacity activeOpacity={1} style={styles.fanContainer} onPress={()=> {onFanPress()}}>
<Image style={styles.fanImage} source={require('../../images/content_fan.png')}/>
</TouchableOpacity>
</View>
<View style={styles.lineView}/>
</View>
);
}
}
let { width, height } = Dimensions.get('window');
const DEVICE_HEIGHT_RATIO = height / 667;
let styles = StyleSheet.create({
headerBackground: {
width: width,
height: 80,
backgroundColor: 'white',
flexDirection: 'row',
},
headIcon: {
width: 50,
height: 50,
marginLeft: 15,
marginTop: 15,
marginRight:15,
overflow: 'hidden',
borderRadius: 25,
},
textView: {
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-start',
marginTop: 15,
marginBottom: 20,
},
startTimeText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 12,
color: '#B0B0B0',
height: 17
},
nicknameText: {
fontSize: 14,
fontFamily: 'PingFang-SC-Medium',
color: 'black',
fontWeight: 'bold'
},
fanContainer: {
position: 'absolute',
top: 27,
right: 15,
width: 60,
height: 25,
},
fanImage: {
width: 60,
height: 25,
},
lineView: {
marginLeft:15,
marginRight: 0,
width: width-15,
height: 1,
backgroundColor: '#e0e0e0'
},
});
... ...
/**
* Created by zzz on 2019/3/12.
*/
'use strict';
import React, {Component} from 'react';
import {Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
import {Immutable} from "immutable";
import YH_Image from '../../../common/components/YH_Image';
export default class ContentLikedListCell extends Component {
constructor(props) {
super(props);
}
render() {
let ico = 'http://head.static.yhbimg.com/yhb-head/2018/07/02/16/01fc258bbe83d5b332f3b2631897b80ec9.591188.jpg?imageView2/{mode}/w/{width}/h/{height}';
let picUrl = 'http://img10.static.yhbimg.com/unionimg/2018/09/11/16/012d77a863813f5789f7b9cb92a561ec87.jpg';
let imageUrl = YH_Image.getSlicedUrl(ico, 50, 50, 2);
function onHeadIconPress() {
}
function onOriginPress() {
}
return (
<View>
<View style={styles.headerBackground}>
<TouchableOpacity activeOpacity={1} onPress={()=> {onHeadIconPress()}}>
<YH_Image style={styles.headIcon} url={imageUrl} circle={true}/>
</TouchableOpacity>
<View style={styles.textView}>
<Text style={styles.nicknameText}>社区用户昵称</Text>
<Text style={styles.subnameText}>赞了你</Text>
</View>
</View>
<TouchableOpacity activeOpacity={1} onPress={() => {onOriginPress()}}>
<View style={ styles.originView} >
<Text style={styles.copyText}>原文</Text>
<YH_Image url={picUrl} style={styles.imageStyle} />
<Text style={styles.originText} numberOfLines={1}>这款Acne Studios 推出全新「The Johnny Winter Project」系列的东西很好很不错呢，我也很喜欢，太棒了</Text>
</View>
</TouchableOpacity>
<View style={styles.timeView}>
<Text style={styles.startTimeText}>{'2018.03.05'}</Text>
</View>
<View style={styles.lineView}/>
</View>
);
}
}
let { width, height } = Dimensions.get('window');
const DEVICE_HEIGHT_RATIO = height / 667;
let styles = StyleSheet.create({
headerBackground: {
width: width,
height: 70,
backgroundColor: 'white',
flexDirection: 'row',
},
headIcon: {
width: 40,
height: 40,
marginLeft: 15,
marginTop: 15,
marginRight:10,
overflow: 'hidden',
borderRadius: 20,
},
textView: {
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-start',
marginTop: 18,
marginBottom: 15,
},
nicknameText: {
fontSize: 14,
fontFamily: 'PingFang-SC-Medium',
color: '#222222',
},
subnameText: {
fontSize: 12,
fontFamily: 'PingFang-SC-Regular',
color: '#B0B0B0',
},
originView: {
flex: 1,
marginLeft: 15,
marginRight: 15,
marginBottom: 10,
backgroundColor: '#f0f0f0'
},
copyText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 12,
color: '#444444',
marginTop: 10,
marginLeft: 10,
},
imageStyle: {
marginTop: 10,
marginBottom: 4,
marginLeft: 10,
width: 50 * DEVICE_HEIGHT_RATIO,
height: 50 * DEVICE_HEIGHT_RATIO,
},
originText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 12,
color: '#b0b0b0',
marginLeft: 10,
marginRight: 15,
marginBottom: 9,
},
timeView: {
alignItems: 'flex-start',
marginBottom: 10,
marginLeft: 15,
},
startTimeText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 12,
color: '#B0B0B0',
height: 17
},
lineView: {
marginLeft:15,
marginRight: 0,
width: width-15,
height: 1,
backgroundColor: '#e0e0e0'
},
});
... ...
/**
* Created by zzz on 2019/3/12.
*/
'use strict';
import React, {Component} from 'react';
import {DeviceEventEmitter, Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
import {Immutable} from "immutable";
import YH_Image from '../../../common/components/YH_Image';
export default class ContentMessageCellView extends Component {
constructor(props) {
super(props);
}
render() {
let ico = 'http://head.static.yhbimg.com/yhb-head/2018/07/02/16/01fc258bbe83d5b332f3b2631897b80ec9.591188.jpg?imageView2/{mode}/w/{width}/h/{height}';
let picUrl = 'http://img10.static.yhbimg.com/unionimg/2018/09/11/16/012d77a863813f5789f7b9cb92a561ec87.jpg';
let imageUrl = YH_Image.getSlicedUrl(ico, 50, 50, 2);
let status = true;
function onReplyPress() {
// NativeModules.YH_CommonHelper.showkeyBoardView();
}
return (
<View>
<View style={styles.headerBackground}>
<YH_Image style={styles.headIcon} url={imageUrl} circle={true}/>
<View style={styles.textView}>
<Text style={styles.nicknameText}>社区用户昵称</Text>
<Text style={styles.subnameText}>赞了你</Text>
</View>
<TouchableOpacity activeOpacity={1} style={styles.replyContainer} onPress={()=> {onReplyPress()}}>
<Image style={styles.replyImage} source={require('../../images/content_reply.png')}/>
</TouchableOpacity>
</View>
<View style={styles.replyTextView}>
<Text style={styles.replyText} numberOfLines={2}>这款Acne Studios 推出全新「The Johnny Winter Project」系列的东西很好很不错呢，我也很喜欢，太棒了</Text>
</View>
{ status ?
<View style={styles.ownerReplyView}>
<Text style={{paddingLeft: 10, paddingTop: 14, paddingRight: 1, paddingBottom: 12}}>
<Text style={styles.replyText}>我的评论：</Text>
<Text style={styles.defaultReplyText} numberOfLines={2}>送你一颗小心心，这个鞋子也是我很想入的一款。非常酷棒极了，详情具体关注你的后续文章</Text>
</Text>
</View>
:
<TouchableOpacity activeOpacity={1} onPress={() => {}}>
<View style={ styles.originContainerView} >
<Text style={styles.copyText}>原文</Text>
<YH_Image url={picUrl} style={styles.imageStyle} />
<Text style={styles.originText} numberOfLines={1}>这款Acne Studios 推出全新「The Johnny Winter Project」系列的东西很好很不错呢，我也很喜欢，太棒了</Text>
</View>
</TouchableOpacity> }
<View style={styles.timeView}>
<Text style={styles.startTimeText}>{'2018.03.05'}</Text>
</View>
<View style={styles.lineView}/>
</View>
);
}
}
let { width, height } = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
const DEVICE_HEIGHT_RATIO = height / 667;
let styles = StyleSheet.create({
headerBackground: {
width: width,
height: 70,
backgroundColor: 'white',
flexDirection: 'row',
},
headIcon: {
width: 40,
height: 40,
marginLeft: 15,
marginTop: 15,
marginRight:10,
overflow: 'hidden',
borderRadius: 20,
},
textView: {
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-start',
marginTop: 18,
marginBottom: 15,
},
nicknameText: {
fontSize: 14,
fontFamily: 'PingFang-SC-Medium',
color: '#222222',
},
subnameText: {
fontSize: 12,
fontFamily: 'PingFang-SC-Regular',
color: '#B0B0B0',
},
replyContainer: {
position: 'absolute',
top: 23,
right: 15,
width: 60,
height: 25,
},
replyImage: {
width: 60,
height: 25,
},
replyTextView: {
width: width - 30,
marginBottom: 15,
marginLeft: 15,
},
replyText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 12,
color: '#444444',
},
ownerReplyView : {
flexDirection: 'row',
alignItems: 'center',
width: width - 30,
marginLeft: 15,
backgroundColor: '#F0F0F0',
marginBottom: 10,
},
defaultReplyText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 12,
color: '#a8a8a8',
},
originContainerView: {
flex: 1,
marginLeft: 15,
marginRight: 15,
marginBottom: 10,
backgroundColor: '#f0f0f0'
},
copyText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 12,
color: '#444444',
marginTop: 10,
marginLeft: 9,
},
imageStyle: {
marginTop: 10,
marginBottom: 4,
marginLeft: 9,
width: 50 * DEVICE_HEIGHT_RATIO,
height: 50 * DEVICE_HEIGHT_RATIO,
},
originText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 12,
color: '#b0b0b0',
marginLeft: 9,
marginRight: 16,
marginBottom: 9,
},
timeView: {
alignItems: 'flex-start',
marginBottom: 10,
marginLeft: 15,
},
startTimeText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 12,
color: '#B0B0B0',
height: 17
},
lineView: {
marginLeft:15,
marginRight: 0,
width: width-15,
height: 1,
backgroundColor: '#e0e0e0'
},
});
... ...
... ... @@ -10,7 +10,7 @@ const INVALID_POSITION = -1;
const IMAGE_WIDTH = 50;
const IMAGE_HEIGHT = 50;
class ContentMessageTabItemView extends Component {
export default class ContentMessageTabView extends Component {
constructor(props) {
super(props);
this.state = {
... ... @@ -115,6 +115,4 @@ let styles = StyleSheet.create({
color: 'white',
fontWeight: 'bold',
}
})
export default ContentMessageTabItemView;
});
... ...
... ... @@ -3,23 +3,12 @@
*/
'use strict';
import React, {Component} from "react";
import ReactNative, {
View,
Text,
Image,
ListView,
StyleSheet,
Dimensions,
TouchableOpacity,
InteractionManager,
Platform,
RefreshControl,
DeviceEventEmitter,
NativeModules
import ReactNative, {View, Text, Image, ListView, StyleSheet, Dimensions, TouchableOpacity, Platform, RefreshControl, NativeModules
} from 'react-native';
import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh';
import ContentMessageTabItemView from "./ContentMessageTabItemView";
import ContentMessageTabView from "./ContentMessageTabView";
import ContentMessageCell from "./ContentMessageCell";
export default class ContentMessageView extends Component {
constructor(props) {
... ... @@ -34,13 +23,13 @@ export default class ContentMessageView extends Component {
_renderRow(rowData, sectionID, rowID) {
return (
<View>
</View>
<ContentMessageCell
key={'row'+ rowID}
data={rowData}
/>
);
}
_renderHeader() {
let tipHeight = this.props.contentTipFlag==='0'?40:0;
let lineHeight = this.props.contentTipFlag==='0'?1:0;
... ... @@ -86,7 +75,7 @@ export default class ContentMessageView extends Component {
return <TouchableOpacity style={styles.tabItemContainer} key={index} onPress={()=> {
onPress(button.description, button.type)
}}>
<ContentMessageTabItemView icon={button.imgSource} title={button.description} badge={button.unReadCount}/>
<ContentMessageTabView icon={button.imgSource} title={button.description} badge={button.unReadCount}/>
</TouchableOpacity>
})}
</View>
... ... @@ -104,7 +93,25 @@ export default class ContentMessageView extends Component {
}
render() {
let listData = [];
let listData = [{
date: 1542598633,
inviterUid: 500031912,
uid: 500027570,
orderAmount: 0.00,
dateStr: "2018.11.19",
name: "********27242140",
orderNum: 0,
orderAmountStr: "￥0.00"
}, {
date: 1539584520,
inviterUid: 500031912,
uid: 600032910,
orderAmount: 0.00,
dateStr: "2018.10.15",
name: "YOHO-1c3da9037",
orderNum: 0,
orderAmountStr: "￥0.00"
}];
return (
<View style={styles.container}>
... ...
... ... @@ -11,7 +11,6 @@ import ReactNative, { StyleSheet, Dimensions, Platform, View, Text, NativeModule
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {Map} from "immutable";
import LoadingIndicator from '../../common/components/LoadingIndicator';
import * as contentActions from "../reducers/content/contentActions";
import ContentMessageView from '../components/content/ContentMessageView';
... ... @@ -74,7 +73,6 @@ class ContentMessageContainer extends Component {
this.messageView = view
}}
contentTipFlag={contentTipFlag}/>
<LoadingIndicator isVisible={isFetching}/>
</View>
)
}
... ...