如何仅在特定条件下实现自定义BackHandler行为?

问题描述

我的应用程序中有一个平面列表,我希望使用户能够将长按中的特定列表项标记为选中,并提供一个删除按钮以一次性删除多个项目。这些是我期望的行为。


  1. 如果未选择单位列表中的任何项目,则按一个项目将打开一个包含项目详细信息的新屏幕,然后使用“后退”按钮将您带回到该单位列表。
  2. 如果未选择任何项目,则长按一个项目会将其标记为已选择。选择任何特定项目后按下的每个项目都标记为已选择,而不是打开详细信息屏幕。
  3. 已经选择然后按下的项目将变为未选择状态。
  4. 如果选择了任意数量的项目,则会显示一个删除按钮,并且按下后退按钮会取消选择所有项目。

我已经能够实现前三个行为中的大多数,但是我完全迷失了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 (将#修改为@)