React Native學習（七）—— FlatList實現橫向滑動列表效果

本文基於React Native 0.52

Demo上傳到Git了，有須要能夠看看，寫了新內容會上傳的。Git地址 https://github.com/gingerJY/React-Native-Demo

1、總覽

　　這個效果也是APP裏很常見的，以前把這個想的太複雜了，後來才知道原來用FlatList就能夠輕鬆實現，效果圖以下（專題精選）：

 

2、代碼實現

　　一、加幾條數據

topic: [
    {
         title: '歲末清掃有它們，體驗大不一樣',
         describe: '更輕鬆、更美好的大掃除攻略',
         price: '9.9元起',
     },
     {
          title: '新年一點紅，幸運一全年',
          describe: '那些讓你「紅」運當頭的好物',
          price: '9.9元起',
     },
]

　　二、寫列表的一個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>
        )
 }

　　三、用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，則不顯示水平滾動條

四、樣式

    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

3、其餘

　　　　

　　這種也是用 FlatList 作的，寫法都差很少，具體看https://github.com/gingerJY/React-Native-Demo

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