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(
        <View style = {styles.container}>
            <FlatList
            data = {[
                    {key: "1北京"},
                    {key: "2上海"},
                    {key: "3长沙"},
                    {key: "4广州"},
                    {key: "5武汉"},
                    {key: "6深圳"},
                    {key: "7桂林"},
                    {key: "8郑州"},
                    {key: "9东莞"},
                    {key: "10佛山"},
                    {key: "11南充"},
                    {key: "12肇庆"},
                    {key: "13梧州"},
                    {key: "14赣州"},
                    {key: "15苏州"},
                    {key: "16郑州"},
                    {key: "17南京"},
                    {key: "18黑龙江"},
                    {key: "19哈尔滨"},
                    {key: "20新疆"},
                    {key: "21乌鲁木齐"},
                    {key: "22广东"},
                    {key: "23广西"},
                    {key: "24河南"},
                ]}
                
                renderItem = {({item}) =><Text style = {styles.item}>{item.key}</Text>}
            />
        </View>
    )
}

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(
        <View style = {styles.item}>
            <Text style = {styles.title}>我的地区是:{province}</Text>
        </View>
    )
};

const renderItem = ({item}) => (
    <Item province = {item.province}></Item>
)

const myFlatListView = () => {
    return(
        <SafeAreaView style = {styles.container}>
            <FlatList
                data = {sourceData}
                renderItem = {renderItem}
                keyExtractor = {item => item.id}
            />
        </SafeAreaView>
    );
}

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,
    }
});

1. 注意：返回组件的写法

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

2. 返回方法调用的写法

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

二、SectionList

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


const mySectionList = () => {
    return(
        <View style = {styles.container}>
            <SectionList
                sections={[
                    {provinces: 'D', data: ['Devin', 'Dan', 'Dominic']},
                    {provinces: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
                  ]}
                renderItem = {({item}) => <Text style = {styles.item}>{item}</Text>}
                renderSectionHeader = {({section}) => <Text style = {styles.sectionHeader}>{section.provinces}</Text>}
                keyExtractor = {(item, index) => index}
            />
        </View>
    )
}

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

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

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

2. renderItem 渲染cell
3. renderSectionHeader渲染header

2、SectionList

1. 先准备好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(
      <View>
        <Image
          source = {
            { 
              uri: "https://reactnative.dev/docs/assets/p_cat1.png"
            }
          }
          style = {
            {
              width: 80,
              height: 80
            }
          }
        />
      </View>
    )
  }

const privateRenderItem = (info) => {
    return(
        <View style = {styles.cellStyle}>
            <CatImg></CatImg>
            <Text>{info.item.name}</Text>
        </View>
    )
}

const privateRenderSectionHeader = (info) => {
    return(
        <View>
            <Text key = {info.section.key} style = {styles.sectionStyle}>{info.section.title}</Text>
        </View>
    )
}

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(
        <View style = {styles.container}>
            <SectionList
                sections = {dataSource}
                renderItem = {privateRenderItem}
                renderSectionHeader = {privateRenderSectionHeader}
                keyExtractor = {(item, index) => index}
                contentContainerStyle = {styles.sectionListStyle}
            />
        </View>
    )
}

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字段不能替换，其他的都可以替换