React Native 实现瀑布流列表页,分组+组内横向的列表页

随着React Native的更新,因为其跨平台的优越性,越来越多的公司和项目采用其作为其快速开发和迭代的基础语言. 
但是其并不是任何控件其都已经涵盖了,就拿我们常见的列表页来说, 一般通用的纵向或者横向列表我们可以使用RN里面的FlatList,需要分组的时候我们可以使用SectionList,但是当我们又想要分组又想要组内横向排列的时候我们会发现已有的控件就无法满足我们了…. 
那么是否就是黔驴技穷呢?并不是,万能的开发者不会因为这些小的需求而难住,于是我们可以通过SectionList+FlatList的组合来实现. 
于是有了大的列表首先SectionList来进行分组,每组只有一个组内元素,这个组内元素是一个FlatList,然后在想普通的渲染FlatList的方式即可.

import React, { Component } from 'react';
import { 
    Dimensions, 
    SafeAreaView,
    SectionList, 
    FlatList,
    View, 
    Text, 
    TouchableOpacity, 
    StyleSheet,
    Image 
} from 'react-native';
const { width, height } = Dimensions.get('window');

const numColumns = 5;

export default class Me extends Component {
    render() {
        const data = [{
            content: [
                {key: 'mine_icon_hot', title: '排行榜'},
                {key: 'mine_icon_preview', title: '审帖'},
                {key: 'mine_icon_manhua', title: '漫画'},
                {key: 'mine_icon_activity', title: '我的收藏'},
                {key: 'mine_icon_nearby', title: '附近'},
                {key: 'mine_icon_random', title: '随机穿越'},
                {key: 'mine_icon_feedback', title: '意见反馈'},
                {key: 'mine_icon_more', title: '更多'},
            ],
            key: 'content',
        }];
        return (
            <SafeAreaView style={styles.container}>
                <SectionList
                    sections={[{data}]}
                    renderItem={this._renderSectionItem}
                    ListHeaderComponent={this._ListHeaderComponent}
                    ListFooterComponent={this._ListFooterComponent}
                    keyExtractor={this._keyExtractor}
                    />
            </SafeAreaView>
        )
    }

    _keyExtractor = (item, index) => {
        return item.key;
    }

    _ListHeaderComponent = () => {
        return (
            <TouchableOpacity 
                activeOpacity={0.7}
                style={styles.header}
            >
                <View style={styles.headerUser}>
                    <Image 
                        source={{uri: 'default_header'}} 
                        style={{width: 50, height: 50}}
                    />
                    <Text style={{marginHorizontal: 10}}>百思不得姐</Text>
                    <Image 
                        source={{uri: 'profile_level1'}}
                        style={{width: 36, height: 15}}
                    />
                </View>
                <Image 
                    source={{uri: 'arrow_right'}}
                    style={{width: 7, height: 12}}
                />
            </TouchableOpacity> 
        )
    }

    _renderItem = ({item}) => {
        return (
            <TouchableOpacity 
                activeOpacity={0.7}
                style={styles.item}
            >
                <Image 
                    source={{uri: item.key}}  
                    style={styles.itemImage}
                />
                <Text style={styles.itemText}>{item.title}</Text>
            </TouchableOpacity>
        )
    }

    _renderSectionItem = ({section}) => {
        return (
            <FlatList
                data={section.data[0].content}
                numColumns={numColumns}
                renderItem={this._renderItem}
                style={{backgroundColor: '#fff'}}
                scrollEnabled={false}
            />
        )
    }

    _ListFooterComponent = () => {
        return (
            <TouchableOpacity 
                activeOpacity={0.7}
                style={styles.footer}
            >
                <Text>好友动态</Text>
                <Image 
                    source={{uri:'arrow_right'}}
                    style={{width: 7, height: 12}}
                />
            </TouchableOpacity>
        )
    }
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        height: 100,
        backgroundColor: '#fff',
        marginBottom: 10,
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 15,
    },
    headerUser: {
        flex: 1, 
        flexDirection: 'row', 
        alignItems: 'center',
    },
    footer: {
        height: 50,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 15,
        marginTop: 10,
    },
    item: {
        backgroundColor: '#fff',
        width: width/numColumns,
        height: 80,  
        alignItems: 'center',
        justifyContent: 'center',
    },
    itemImage: {
        width: 40,
        height: 40,
        marginBottom: 5,
    },
    itemText: {
        fontSize: 12,
    }

})