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: '那些让你“红”运当头的好物',

]

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-----------------------------------------------------------------