rn 实现上下滑动选择列表_React Native学习（七）—— FlatList实现横向滑动列表效果...

本文基于React Native 0.52

一、总览

这个效果也是APP里很常见的，之前把这个想的太复杂了，后来才知道原来用FlatList就可以轻松实现，效果图如下(专题精选)：

二、代码实现

1、加几条数据

topic: [

{

title: '岁末清扫有它们，体验大不同',

describe: '更轻松、更美好的大扫除攻略',

price: '9.9元起',

},

{

title: '新年一点红，幸运一整年',

describe: '那些让你“红”运当头的好物',

price: '9.9元起',

},

]

2、写列表的一个item

renderTopicItem = ({ item }) => {

return (

{item.title}

{item.describe}

{item.price}

)

}

3、用FlatList渲染出列表

renderTopic() {

return (

专题精选

data={this.state.topic}

keyExtractor={(item, index) => index}

renderItem={this.renderTopicItem}

horizontal={true}

showsHorizontalScrollIndicator={false}

/>

)

}

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

},

三、其他

　　

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