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