问题描述
我的应用程序中有一个平面列表,我希望使用户能够将长按中的特定列表项标记为选中,并提供一个删除按钮以一次性删除多个项目。这些是我期望的行为。
- 如果未选择单位列表中的任何项目,则按一个项目将打开一个包含项目详细信息的新屏幕,然后使用“后退”按钮将您带回到该单位列表。
- 如果未选择任何项目,则长按一个项目会将其标记为已选择。选择任何特定项目后按下的每个项目都标记为已选择,而不是打开详细信息屏幕。
- 已经选择然后按下的项目将变为未选择状态。
- 如果选择了任意数量的项目,则会显示一个删除按钮,并且按下后退按钮会取消选择所有项目。
我已经能够实现前三个行为中的大多数,但是我完全迷失了Back Handler。这是我的组件,仅带有简短的相关代码。仅显示包含选择要删除的项目的状态数组和用作Flatlist的RenderItem属性的listItem。
const Home = (props) => {
const [deleteItems,setDeleteItems] = useState([]);
const renderItem = ({ item }) => {
let bb_OR_ub = item.useBy ? 'Use By ' : 'Best Before '
let exp_check = CheckExp(item,1);
let listStyle = {};
if (exp_check === -1)
listStyle = { backgroundColor: '#ff9ea5' }
else if (exp_check === 0)
listStyle = { backgroundColor: '#fff185' }
if (deleteItems.indexOf(item.name) != -1) {
listStyle = { opacity: 0.3 }
}
return (
<ListItem
containerStyle={listStyle}
badge={
exp_check !== 1 ?
exp_check === -1 ? { status: 'error',value: `!` } : {
status: 'warning'
} : null
}
title={item.name}
subtitle={bb_OR_ub + item.date}
bottomDivider
leftAvatar={{ source: require('../shared/cexp.png'),imageProps: { resizeMode: 'contain' } }}
onPress={() => {
if (deleteItems.length == 0)
navigate('ExpiryDetails',{ item })
else {
setDeleteItems([...deleteItems,item.name])
}
}}
onLongPress={() => {
if (deleteItems.indexOf(item.name) == -1 || deleteItems.length == 0) {
setDeleteItems([...deleteItems,item.name])
}
else {
setDeleteItems(deleteItems.filter(el => el != item.name))
}
}} />
);
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)