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 {
export default class DetailBrand extends React.Component {
constructor(props) {
super(props);
this._renderRow = this._renderRow.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1.key != r2.key,
});
}
shouldComponentUpdate(nextProps){
... ... @@ -28,11 +32,41 @@ export default class DetailBrand extends React.Component {
return true;
}
}
_renderRow(rowData, sectionID, rowID) {
if (rowID%4 == 0&&rowID>0) {
console.log('aaaa');
return (
<View style={styles.lastCell}>
<Image style={styles.cellImg} source={{uri:'http://img12.static.yhbimg.com/brandLogo/2016/12/08/10/02f7daaa12fae8c3bacbcdf6bad438cd3a.jpg'}}/>
<Text style={styles.cellTitle}>LifeAfter Life</Text>
</View>
);
} else {
return (
<View style={styles.cell}>
<Image style={styles.cellImg} source={{uri:'http://img12.static.yhbimg.com/brandLogo/2016/12/08/10/02f7daaa12fae8c3bacbcdf6bad438cd3a.jpg'}}/>
<Text style={styles.cellTitle}>LifeAfter Life</Text>
</View>
);
}
}
render() {
return(
<Text>bbbbbbb</Text>
<View style={styles.container}>
<View style={styles.headerView}>
<Text style={styles.headerText}>相关品牌</Text>
</View>
<ListView
contentContainerStyle={styles.brandContainer}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows([1,2,3,])}
renderRow={this._renderRow}
scrollEnabled={false}
scrollsToTop={false}
horizontal={true}
/>
</View>
);
return null;
}
... ... @@ -40,7 +74,74 @@ export default class DetailBrand extends React.Component {
let {width, height} = Dimensions.get('window');
let cellWidth = width/4.0;
let cellHeight = cellWidth;
let styles = StyleSheet.create({
container: {
backgroundColor: '#f0f0f0',
},
headerView: {
backgroundColor: 'white',
borderColor: 'rgb(215, 215, 215)',
marginLeft: 15,
marginRight: 15,
marginTop: 15,
height: 44,
borderTopWidth: 1,
borderLeftWidth: 1,
borderRightWidth: 1,
},
headerText: {
backgroundColor: 'white',
fontSize: 18,
color: 'rgb(215, 215, 215)',
textAlign: 'center',
paddingTop: 13,
flex: 1,
},
brandContainer: {
backgroundColor: 'white',
borderColor: 'rgb(215, 215, 215)',
borderTopWidth: 1,
borderBottomWidth: 1,
flexDirection: 'row',
flexWrap: 'wrap',
width: width,
paddingBottom: 15,
},
cell: {
width: cellHeight,
height: cellWidth,
backgroundColor: 'white',
marginTop: 15,
flexDirection: 'column',
borderColor: 'rgb(215, 215, 215)',
borderLeftWidth: 1,
justifyContent: 'space-between',
},
lastCell: {
width: cellHeight,
height: cellWidth,
backgroundColor: 'white',
marginTop: 15,
flexDirection: 'column',
justifyContent: 'space-between',
},
cellImg: {
backgroundColor: 'gray',
marginLeft: (cellWidth-55)/2,
width: 55,
height: 55,
},
cellTitle: {
backgroundColor: 'white',
fontSize: 11,
color: 'rgb(215, 215, 215)',
textAlign: 'center',
marginLeft: 0,
marginRight: 0,
}
});
... ...
... ... @@ -19,6 +19,10 @@ const {
export default class OtherArticle extends React.Component {
constructor(props) {
super(props);
this._renderRow = this._renderRow.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1.key != r2.key,
});
}
shouldComponentUpdate(nextProps){
... ... @@ -29,10 +33,38 @@ export default class OtherArticle extends React.Component {
}
}
_renderRow(rowData, sectionID, rowID) {
return (
<View style={styles.cell}>
<Image style={styles.cellImage} source={{uri:'http://img13.static.yhbimg.com/article/2016/12/12/16/02fef795d6bdaf18122492f765576f6c7e.jpg'}}/>
<View style={styles.cellContent}>
<Text style={styles.cellTitle} numberOfLines={2}>
skdjfalksdjf;alksdj收到了空间发生；来的快解放了快速的减肥；离开激发；考了多少
</Text>
<View style={styles.bottomContent}>
<Image style={styles.clockIcon}/>
<Text style={styles.timeText}>12月12日 12:20</Text>
</View>
</View>
</View>
);
}
render() {
return(
<Text>ccccccc</Text>
<View style={styles.container}>
<View style={styles.headerView}>
<Text style={styles.headerText}>相关文章</Text>
</View>
<ListView
style={styles.articleContainer}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows([1,2,3])}
renderRow={this._renderRow}
scrollEnabled={false}
scrollsToTop={false}
/>
</View>
);
return null;
}
... ... @@ -42,5 +74,80 @@ export default class OtherArticle extends React.Component {
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
backgroundColor: '#f0f0f0',
},
headerView: {
backgroundColor: 'white',
borderColor: 'rgb(215, 215, 215)',
marginLeft: 15,
marginRight: 15,
marginTop: 15,
height: 44,
borderTopWidth: 1,
borderLeftWidth: 1,
borderRightWidth: 1,
},
headerText: {
backgroundColor: 'white',
fontSize: 18,
color: 'rgb(215, 215, 215)',
textAlign: 'center',
paddingTop: 13,
flex: 1,
},
articleContainer: {
backgroundColor: 'white',
borderColor: 'rgb(215, 215, 215)',
borderTopWidth: 1,
paddingBottom: 17,
},
cell: {
backgroundColor: 'white',
paddingBottom: 3,
flexDirection: 'row',
},
cellImage: {
width: 106,
height: 67,
top: 17,
left: 17,
backgroundColor: 'gray',
},
cellContent: {
left: 34,
marginTop: 17,
right: 17,
flexDirection: 'column',
backgroundColor: 'white',
justifyContent: 'space-between',
width: width-106-51,
},
cellTitle: {
fontSize: 15,
color: 'rgb(51, 51, 51)',
marginTop: 2,
marginLeft: 0,
backgroundColor: 'white'
},
bottomContent: {
left:0,
right: 0,
height: 16,
backgroundColor: 'white',
flexDirection: 'row',
},
clockIcon: {
top: 3,
width: 11,
height: 11,
backgroundColor: 'gray',
},
timeText: {
backgroundColor: 'white',
fontSize: 10,
color: 'rgb(215, 215, 215)',
top: 3,
left: 3,
}
});
... ...