RN开发系列＜4＞--FlatList & SectionList (iOS中的tableView)

一、FlatList

1.就是iOS中的普通tableView
2.SectionList就是带group的tableView

import React from 'react';
import {
    FlatList,
    StyleSheet,
    Text,
    View
} from 'react-native';

const myFlat = () => {
    return(
        
            {item.key}}
            />
        
    )
}

export default myFlat;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44
    }
});

其中有很多步骤可以抽取出来，将部分方法和组件抽取出来的写法：

import React from "react";
import {
    FlatList,
    View,
    Text,
    StyleSheet,
    SafeAreaView,
    StatusBar
} from 'react-native';

const sourceData = [
    {
        id: '1',
        province: '广东省'
    },
    {
        id: '2',
        province: '浙江省'
    },
    {
        id: '3',
        province: '湖南省'
    }
];

const Item = ({province}) => {
    return(
        
            我的地区是:{province}
        
    )
};

const renderItem = ({item}) => (
    
)

const myFlatListView = () => {
    return(
        
             item.id}
            />
        
    );
}

export default myFlatListView;


const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16
    },
    title: {
        fontSize: 32,
    }
});

注意：返回组件的写法

const Item = ({province}) => {} // 返回的组件

返回方法调用的写法

const renderItem = ({item}) => () // 返回的方法

二、SectionList

import React from 'react';
import {
    SectionList,
    StyleSheet,
    Text,
    View
} from 'react-native';


const mySectionList = () => {
    return(
        
             {item}}
                renderSectionHeader = {({section}) => {section.provinces}}
                keyExtractor = {(item, index) => index}
            />
        
    )
}

export default mySectionList;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    sectionHeader: {
        paddingTop: 8,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)'
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44
    }
})

字段provinces可以替换成其他值，但是data替换其他值就会有问题了

sections = {[
           {provinces: 'D', data: ['Devin', 'Dan', 'Dominic']},
           {provinces: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}

renderItem 渲染cellrenderSectionHeader渲染header 2、SectionList 先准备好json文件，数据源

{
    "data": [
        {
            "cars": [
                {
                    "name": "奥迪"
                },
                {
                    "name": "奥拓"
                },
                {
                    "name": "阿仕顿马丁"
                },
                {
                    "name": "奥拓"
                },
                {
                    "name": "阿仕顿马丁"
                }
            ],
            "title": "A"
        },
        {
            "cars": [
                {
                    "name": "奔驰"
                },
                {
                    "name": "比亚迪"
                }
            ],
            "title": "B"
        }

    ]
}

import React from 'react';
import {
    SectionList,
    View,
    Text,
    Image,
    StyleSheet,
    StatusBar,
    Dimensions
} from 'react-native';

var Car = require('./Car.json');

const dimensions = Dimensions.get('window');
var itemWidth = 100;
var cols = 3;
var cMargin = (dimensions.width - (itemWidth * cols)) / 4.0;
var rMargin = 10;

const CatImg = () => {
    return(
      
        
      
    )
  }

const privateRenderItem = (info) => {
    return(
        
            
            {info.item.name}
        
    )
}

const privateRenderSectionHeader = (info) => {
    return(
        
            {info.section.title}
        
    )
}

const CarList = () => {
    var dataSource = [];

    for (var i = 0; i < Car.data.length; i++) {
        let datas = [];
        for (var j = 0; j < Car.data[i].cars.length; j++) {
            datas.push(Car.data[i].cars[j]);
        }
        dataSource.push({key: i, data: datas, title: Car.data[i].title});
    }

    return(
        
             index}
                contentContainerStyle = {styles.sectionListStyle}
            />
        
    )
}

export default CarList;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0
    },
    sectionHeader: {
        paddingTop: 8,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)'
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 250
    },
    sectionListStyle: {
        flexDirection: 'row',
        flexWrap: 'wrap-reverse',
        alignItems: 'flex-start',
        backgroundColor: '#dd6ddd',
    },
    sectionListStyle: {
        flexDirection: 'row',
        flexWrap:'wrap',
        alignItems: 'flex-start',
        backgroundColor: '#dd6ddd',
    },
    sectionStyle: {
        width: dimensions.width,
        padding: 12,
        backgroundColor: '#21c6cd',
        color: '#fff'
    },
    cellStyle: {
        alignItems: 'center',
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#ff496b',
        marginLeft: cMargin,
        marginTop:rMargin,
        marginBottom:rMargin,
        padding: 6,
        width:itemWidth
    },
})

dataSource.push({carKey: i, data: datas, myTitle: Car.data[i].title});

这里的data字段不能替换，其他的都可以替换