mobile / YH_RNComponent · Commits

Go to a project

Authored by shixiang
Commit 8310fe074d33e484ffed597f0a0b37caec14188a 2 parents a0b3699c b44fee18

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

Inline Side-by-side
Showing 2 changed files with 212 additions and 4 deletions
@@ -19,6 +19,10 @@ const { @@ -19,6 +19,10 @@ const {
19 export default class DetailBrand extends React.Component { 19 export default class DetailBrand extends React.Component {
20 constructor(props) { 20 constructor(props) {
21 super(props); 21 super(props);
  22 + this._renderRow = this._renderRow.bind(this);
  23 + this.dataSource = new ListView.DataSource({
  24 + rowHasChanged: (r1, r2) => r1.key != r2.key,
  25 + });
22 } 26 }
23 27
24 shouldComponentUpdate(nextProps){ 28 shouldComponentUpdate(nextProps){
@@ -28,11 +32,41 @@ export default class DetailBrand extends React.Component { @@ -28,11 +32,41 @@ export default class DetailBrand extends React.Component {
28 return true; 32 return true;
29 } 33 }
30 } 34 }
31 - 35 + _renderRow(rowData, sectionID, rowID) {
  36 + if (rowID%4 == 0&&rowID>0) {
  37 + console.log('aaaa');
  38 + return (
  39 + <View style={styles.lastCell}>
  40 + <Image style={styles.cellImg} source={{uri:'http://img12.static.yhbimg.com/brandLogo/2016/12/08/10/02f7daaa12fae8c3bacbcdf6bad438cd3a.jpg'}}/>
  41 + <Text style={styles.cellTitle}>LifeAfter Life</Text>
  42 + </View>
  43 + );
  44 + } else {
  45 + return (
  46 + <View style={styles.cell}>
  47 + <Image style={styles.cellImg} source={{uri:'http://img12.static.yhbimg.com/brandLogo/2016/12/08/10/02f7daaa12fae8c3bacbcdf6bad438cd3a.jpg'}}/>
  48 + <Text style={styles.cellTitle}>LifeAfter Life</Text>
  49 + </View>
  50 + );
  51 + }
  52 + }
32 53
33 render() { 54 render() {
34 return( 55 return(
35 - <Text>bbbbbbb</Text> 56 + <View style={styles.container}>
  57 + <View style={styles.headerView}>
  58 + <Text style={styles.headerText}>相关品牌</Text>
  59 + </View>
  60 + <ListView
  61 + contentContainerStyle={styles.brandContainer}
  62 + enableEmptySections={true}
  63 + dataSource={this.dataSource.cloneWithRows([1,2,3,])}
  64 + renderRow={this._renderRow}
  65 + scrollEnabled={false}
  66 + scrollsToTop={false}
  67 + horizontal={true}
  68 + />
  69 + </View>
36 ); 70 );
37 return null; 71 return null;
38 } 72 }
@@ -40,7 +74,74 @@ export default class DetailBrand extends React.Component { @@ -40,7 +74,74 @@ export default class DetailBrand extends React.Component {
40 74
41 75
42 let {width, height} = Dimensions.get('window'); 76 let {width, height} = Dimensions.get('window');
  77 +let cellWidth = width/4.0;
  78 +let cellHeight = cellWidth;
43 79
44 let styles = StyleSheet.create({ 80 let styles = StyleSheet.create({
  81 + container: {
  82 + backgroundColor: '#f0f0f0',
  83 + },
  84 + headerView: {
  85 + backgroundColor: 'white',
  86 + borderColor: 'rgb(215, 215, 215)',
  87 + marginLeft: 15,
  88 + marginRight: 15,
  89 + marginTop: 15,
  90 + height: 44,
  91 + borderTopWidth: 1,
  92 + borderLeftWidth: 1,
  93 + borderRightWidth: 1,
  94 + },
  95 + headerText: {
  96 + backgroundColor: 'white',
  97 + fontSize: 18,
  98 + color: 'rgb(215, 215, 215)',
  99 + textAlign: 'center',
  100 + paddingTop: 13,
  101 + flex: 1,
  102 +
  103 + },
  104 + brandContainer: {
  105 + backgroundColor: 'white',
  106 + borderColor: 'rgb(215, 215, 215)',
  107 + borderTopWidth: 1,
  108 + borderBottomWidth: 1,
  109 + flexDirection: 'row',
  110 + flexWrap: 'wrap',
  111 + width: width,
  112 + paddingBottom: 15,
  113 + },
  114 + cell: {
  115 + width: cellHeight,
  116 + height: cellWidth,
  117 + backgroundColor: 'white',
  118 + marginTop: 15,
  119 + flexDirection: 'column',
  120 + borderColor: 'rgb(215, 215, 215)',
  121 + borderLeftWidth: 1,
  122 + justifyContent: 'space-between',
  123 + },
  124 + lastCell: {
  125 + width: cellHeight,
  126 + height: cellWidth,
  127 + backgroundColor: 'white',
  128 + marginTop: 15,
  129 + flexDirection: 'column',
  130 + justifyContent: 'space-between',
  131 + },
  132 + cellImg: {
  133 + backgroundColor: 'gray',
  134 + marginLeft: (cellWidth-55)/2,
  135 + width: 55,
  136 + height: 55,
  137 + },
  138 + cellTitle: {
  139 + backgroundColor: 'white',
  140 + fontSize: 11,
  141 + color: 'rgb(215, 215, 215)',
  142 + textAlign: 'center',
  143 + marginLeft: 0,
  144 + marginRight: 0,
  145 + }
45 146
46 }); 147 });
@@ -19,6 +19,10 @@ const { @@ -19,6 +19,10 @@ const {
19 export default class OtherArticle extends React.Component { 19 export default class OtherArticle extends React.Component {
20 constructor(props) { 20 constructor(props) {
21 super(props); 21 super(props);
  22 + this._renderRow = this._renderRow.bind(this);
  23 + this.dataSource = new ListView.DataSource({
  24 + rowHasChanged: (r1, r2) => r1.key != r2.key,
  25 + });
22 } 26 }
23 27
24 shouldComponentUpdate(nextProps){ 28 shouldComponentUpdate(nextProps){
@@ -29,10 +33,38 @@ export default class OtherArticle extends React.Component { @@ -29,10 +33,38 @@ export default class OtherArticle extends React.Component {
29 } 33 }
30 } 34 }
31 35
  36 + _renderRow(rowData, sectionID, rowID) {
  37 + return (
  38 + <View style={styles.cell}>
  39 + <Image style={styles.cellImage} source={{uri:'http://img13.static.yhbimg.com/article/2016/12/12/16/02fef795d6bdaf18122492f765576f6c7e.jpg'}}/>
  40 + <View style={styles.cellContent}>
  41 + <Text style={styles.cellTitle} numberOfLines={2}>
  42 + skdjfalksdjf;alksdj收到了空间发生；来的快解放了快速的减肥；离开激发；考了多少
  43 + </Text>
  44 + <View style={styles.bottomContent}>
  45 + <Image style={styles.clockIcon}/>
  46 + <Text style={styles.timeText}>12月12日 12:20</Text>
  47 + </View>
  48 + </View>
  49 + </View>
  50 + );
  51 + }
32 52
33 render() { 53 render() {
34 return( 54 return(
35 - <Text>ccccccc</Text> 55 + <View style={styles.container}>
  56 + <View style={styles.headerView}>
  57 + <Text style={styles.headerText}>相关文章</Text>
  58 + </View>
  59 + <ListView
  60 + style={styles.articleContainer}
  61 + enableEmptySections={true}
  62 + dataSource={this.dataSource.cloneWithRows([1,2,3])}
  63 + renderRow={this._renderRow}
  64 + scrollEnabled={false}
  65 + scrollsToTop={false}
  66 + />
  67 + </View>
36 ); 68 );
37 return null; 69 return null;
38 } 70 }
@@ -42,5 +74,80 @@ export default class OtherArticle extends React.Component { @@ -42,5 +74,80 @@ export default class OtherArticle extends React.Component {
42 let {width, height} = Dimensions.get('window'); 74 let {width, height} = Dimensions.get('window');
43 75
44 let styles = StyleSheet.create({ 76 let styles = StyleSheet.create({
45 - 77 + container: {
  78 + backgroundColor: '#f0f0f0',
  79 + },
  80 + headerView: {
  81 + backgroundColor: 'white',
  82 + borderColor: 'rgb(215, 215, 215)',
  83 + marginLeft: 15,
  84 + marginRight: 15,
  85 + marginTop: 15,
  86 + height: 44,
  87 + borderTopWidth: 1,
  88 + borderLeftWidth: 1,
  89 + borderRightWidth: 1,
  90 + },
  91 + headerText: {
  92 + backgroundColor: 'white',
  93 + fontSize: 18,
  94 + color: 'rgb(215, 215, 215)',
  95 + textAlign: 'center',
  96 + paddingTop: 13,
  97 + flex: 1,
  98 + },
  99 + articleContainer: {
  100 + backgroundColor: 'white',
  101 + borderColor: 'rgb(215, 215, 215)',
  102 + borderTopWidth: 1,
  103 + paddingBottom: 17,
  104 + },
  105 + cell: {
  106 + backgroundColor: 'white',
  107 + paddingBottom: 3,
  108 + flexDirection: 'row',
  109 + },
  110 + cellImage: {
  111 + width: 106,
  112 + height: 67,
  113 + top: 17,
  114 + left: 17,
  115 + backgroundColor: 'gray',
  116 + },
  117 + cellContent: {
  118 + left: 34,
  119 + marginTop: 17,
  120 + right: 17,
  121 + flexDirection: 'column',
  122 + backgroundColor: 'white',
  123 + justifyContent: 'space-between',
  124 + width: width-106-51,
  125 + },
  126 + cellTitle: {
  127 + fontSize: 15,
  128 + color: 'rgb(51, 51, 51)',
  129 + marginTop: 2,
  130 + marginLeft: 0,
  131 + backgroundColor: 'white'
  132 + },
  133 + bottomContent: {
  134 + left:0,
  135 + right: 0,
  136 + height: 16,
  137 + backgroundColor: 'white',
  138 + flexDirection: 'row',
  139 + },
  140 + clockIcon: {
  141 + top: 3,
  142 + width: 11,
  143 + height: 11,
  144 + backgroundColor: 'gray',
  145 + },
  146 + timeText: {
  147 + backgroundColor: 'white',
  148 + fontSize: 10,
  149 + color: 'rgb(215, 215, 215)',
  150 + top: 3,
  151 + left: 3,
  152 + }
46 }); 153 });