React Native学习（七）—— FlatList实现横向滑动列表效果

本文基于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: '那些让你“红”运当头的好物',price: '9.9元起',},
]

　　2、写列表的一个item

renderTopicItem = ({ item }) => {return (<TouchableOpacity style={styles.topicItem}><Image source={require('../../img/topic.jpg')} style={styles.topicImg} /><View style={styles.topicContainer}><View style={styles.topicText}><Text style={styles.topicTitle}>{item.title}</Text><Text style={styles.topicDesc}>{item.describe}</Text></View><Text style={styles.topicPrice}>{item.price}</Text></View></TouchableOpacity>)}

　　3、用FlatList渲染出列表

renderTopic() {return (<View style={styles.topic}><Text style={styles.topicHead}>专题精选</Text><FlatListdata={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,color:'#666',},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

三、其他

　　这种也是用 FlatList 做的，写法都差不多，具体看https://github.com/gingerJY/React-Native-Demo

END-----------------------------------------------------------------

转载于:https://www.cnblogs.com/MaiJiangDou/p/8351288.html