FlatList
循环列表
导入
import {
FlatList,
View,
Text,
StyleSheet,
Dimensions,
TouchableOpacity,
} from 'react-native';
- 使用方法:
- 设置renderItem
//循环的每一个项
renderItem = ({index, item}) => {
const backgroundColor = this.setBackgroundColor(item.id);
const flex = this.setFlex(item.id);
return (
<TouchableOpacity
//样式里面相同的元素,后面的元素起作用
//通过这种数组的方式,可以根据函数实现根据id的不同,项的样式不同
style={[styles.content, {backgroundColor}, {flex}]}
//每个项设置点击事件
onPress={() => this.calculatorClick(item.content)}>
<Text style={styles.contentText}>{item.content}</Text>
</TouchableOpacity>
);
};
//根据id设置背景颜色
setBackgroundColor = id => {
if (id < 4) {
return '#808080';
}
if (id % 4 === 0) {
return '#ffa500';
}
return '#d3d3d3';
};
//根据id设置分布大小
setFlex = id => {
if (id === 17) {
return 2;
}
return 1;
};
//数据示例
dataList = [
{id: 1, content: 'AC'},
{id: 2, content: '+/-'},
{id: 3, content: '%'},
{id: 4, content: '÷'},
]
- 使用flatList
<FlatList
data={this.dataList}
renderItem={this.renderItem}
//设置列数
numColumns={4}
/>