一、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,
}
});
- 注意:返回组件的写法
const Item = ({province}) => {} // 返回的组件
- 返回方法调用的写法
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
}
})
- 字段
provinces
可以替换成其他值,但是data
替换其他值就会有问题了
sections = {[
{provinces: 'D', data: ['Devin', 'Dan', 'Dominic']},
{provinces: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
]}
- renderItem 渲染cell
- renderSectionHeader渲染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(
<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字段不能替换,其他的都可以替换