react native SectionList组件实现多选
2024-10-20 20:41:14
如下图所示：
代码如下:
import React, { useRef, Component } from 'react';
import {
Platform,
Text,
View,
TextInput,
TouchableOpacity,
ScrollView,
Image,
Button,
SectionList,
StyleSheet,
ToastAndroid,
Dimensions,
Alert,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
const DATA = [
{
titleId: "1",
titleName: "水果",
data: [
{ id: '01', name: '香蕉', selected: false },
{ id: '02', name: '梨', selected: false },
{ id: '03', name: '葡萄', selected: false },
{ id: '04', name: '猕猴桃', selected: false },
{ id: '05', name: '苹果', selected: false },
{ id: '06', name: '桃子', selected: false },
{ id: '07', name: '西瓜', selected: false },
{ id: '08', name: '橘子', selected: false },
]
},
{
titleId: "2",
titleName: "菜品",
data: [
{ id: '09', name: '辣椒', selected: false },
{ id: '10', name: '白菜', selected: false },
{ id: '11', name: '青菜', selected: false },
{ id: '12', name: '茄子', selected: false },
{ id: '13', name: '南瓜', selected: false },
{ id: '14', name: '土豆', selected: false },
{ id: '15', name: '西红柿', selected: false },
{ id: '16', name: '粉条', selected: false },
{ id: '17', name: '豇豆', selected: false },
{ id: '18', name: '牛肉', selected: false },
{ id: '19', name: '猪肉', selected: false },
{ id: '20', name: '鸡翅', selected: false },
{ id: '21', name: '鸡爪', selected: false },
{ id: '22', name: '鸭肉', selected: false },
]
},
];
export default class TestScreen extends Component {
constructor(props) {
super(props);
this.state = {
sourceData: DATA,
selectedItem: []//选中的项
}
};
render() {return (
<View style={styles.container}><SectionList
sections={this.state.sourceData}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
stickySectionHeadersEnabled={true}//吸顶效果
renderItem={this._renderItem} //cell
renderSectionHeader={({ section: { titleName } }) => (
<View style={{ height: 40, justifyContent: 'center', backgroundColor: 'rgba(232,240,248,1)' }}>
<Text style={[, { color: "#0a3989", textAlign: 'center', fontSize: CommonVar.userStyle.titleFontSize + 2 }]}>{titleName}</Text>
</View>
)}
ItemSeparatorComponent={() => {
return <View style={{ borderWidth: 0.2, borderColor: "#d2d2d2" }} />
}}
/>
</View>
)
}
_renderItem = (info) => {
// console.log(info);
if (info.item.selected == true) {
return <TouchableOpacity onPress={this._itemPress.bind(this, info.item, info.index)}>
<View style={{ height: 45, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#FFFFFF' }}>
<Text style={{ marginLeft: 10, alignSelf: 'center', color: "#000000" }}>{info.item.name}</Text>
<Icon name="ios-checkmark-outline" color='blue' size={25} style={{ alignSelf: 'center', marginRight: 5 }} />
</View>
</TouchableOpacity>
} else {
return <TouchableOpacity onPress={this._itemPress.bind(this, info.item, info.index)}>
<View style={{ height: 45, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#FFFFFF' }}>
<Text style={{ marginLeft: 10, alignSelf: 'center', color: "#000000" }}>{info.item.name}</Text>
<Icon name="ios-square-outline" color='#d2d2d2' size={25} style={{ alignSelf: 'center', marginRight: 5 }} />
</View>
</TouchableOpacity>
}
}
_itemPress(selectItem, index) {
var $this = this;
this.state.sourceData.forEach(function (item1, lev1Index) {
item1.data.forEach(function (item2, lev2Index) {
if (item2.id == selectItem.id) {
//循环数据是否存在，存在就移除
var isExist = false;
$this.state.selectedItem.forEach(function (obj, objIndex) {
if (obj.id == selectItem.id && obj.titleId == item1.titleId) {
//找到存在的对象删除掉
$this.state.selectedItem.splice(objIndex, 1);
isExist = true;
}
})
if (isExist == false) {
//不存在就加到集合中去
$this.state.selectedItem.push({ id: selectItem.id, titleId: item1.titleId });
}
$this.state.sourceData[lev1Index].data[index].selected = !selectItem.selected;
}
})
})
console.log(this.state.selectedItem)
this.setState({ sourceData: this.state.sourceData })
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#FFFFFF"
},
})
最新文章
- 解决CentOS无法解析域名的问题
- OpenCV 绘制图像直方图
- 【jQuery】serializeArray()与serialize()的区别
- 关于"The dependency was added by the project system and cannot be removed" Error
- [CareerCup] 7.2 Ants on Polygon 多边形上的蚂蚁
- xampp 安装red扩展出错解决
- [转]RecyclerView初探
- UVa 11408 - Count DePrimes
- 线上问题debug过程(cat,grep,tr,awk,sort,uniq,comm等工具的综合使用)
- [python] python django web 开发 —— 15分钟送到会用（只能送你到这了）
- spring boot 的参数配置。
- 浅谈数通畅联ECP与EAC的区别
- 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性
- 总算知道怎样从ImageMagick生成的数据转换成HICON: MagickGetImageBlob & LookupIconIdFromDirectoryEx
- epoll源码分析
- yii框架中获取添加数据后的id值
- Codeforces Round #475 (Div. 2) C - Alternating Sum
- OpenSSL基础知识
- A Mist of Florescence CodeForces - 989C(思维构造)
- 11.事件驱动events