本文基于React Native 0.52
Demo上传到Git了,有需要可以看看,写了新内容会上传的。Git地址https://github.com/gingerJY/React-Native-Demo
一、总览
这个效果也是APP里很常见的,之前把这个想的太复杂了,后来才知道原来用FlatList就可以轻松实现,效果图如下(专题精选):
二、代码实现
1、加几条数据
topic: [
{
title: '岁末清扫有它们,体验大不同',
describe: '更轻松、更美好的大扫除攻略',
price: '9.9元起',
},
{
title: '新年一点红,幸运一整年',
describe: '那些让你“红”运当头的好物',
]
2、写列表的一个item
renderTopicItem = ({ item }) => {
return (
<TouchableOpacity {styles.topicItem}>
<Image source={require('../../img/topic.jpg')} {styles.topicImg} />
<View {styles.topicContainer}>
<View {styles.topicText}>
<Text {styles.topicTitle}>{item.title}</Text>
<Text {styles.topicDesc}>{item.describe}</Text>
</View>
<Text {styles.topicPrice}>{item.price}</Text>
</View>
</TouchableOpacity>
)
}
3、用FlatList渲染出列表
renderTopic() {
return (
<View {styles.topic}>
<Text {styles.topicHead}>专题精选</Text>
<FlatList
data={this.state.topic}
keyExtractor={(item,index) => index}
renderItem={this.renderTopicItem}
horizontal={true}
showsHorizontalScrollIndicator={false}
/>
</View>
)
}
data —— 数据(目前只支持普通数组)
renderItem ——根据行数据data渲染每一行的组件
keyExtractor —— 用于为给定的item生成一个不重复的key(Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销)
horizontal —— 设为true时是水平布局
showsHorizontalScrollIndicator —— 设为false,则不显示水平滚动条
4、样式
topic: {
width: width,
alignItems:'center',
backgroundColor: '#fff',
paddingBottom:10,
marginBottom:10,
topicHead:{
fontSize:16,
color:'#666',
padding:15,
topicItem: {
width: width*0.7,
marginLeft:15,
topicImg: {
width: width*0.7,
height: width*0.4,
borderWidth:0.5,
borderColor:'#cdcdcd',
borderRadius:2,
topicContainer:{
flexDirection: 'row',
justifyContent:'space-between',
marginTop:10,
topicTitle:{
fontSize:16,
topicDesc:{
fontSize:13,
color:'#999',
marginTop:3,
topicPrice:{
fontSize:14,
color:'#b4282d',
recommend.js完整代码https://github.com/gingerJY/example/blob/master/RN_flatList/recommend.js
END-----------------------------------------------------------------
精彩评论