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

标签

react

flatlist