Vue-native:动态创建的touchable-opacity都在开始时按下

Question

当我使用v-for循环创建可触摸不透明度或按钮时，所有按钮的按下功能都会被调用，即使我没有触摸任何按钮。但是，使用与处理程序相同的功能的普通按钮没有任何问题。

<view v-for="taskDay in buttons" :key="taskDay.id" class="task-day">
  <touchable-opacity  
    v-for="task in taskDay.next" 
    :key="task.id" 
    :on-press="handleTouch(task.id)" 
    class="task">
  </touchable-opacity>
</view>

methods: {
  handleTouch: function(id) {
    console.log(id);
  }
},

互联网上并没有太多关于vue native的信息。有人能帮上忙吗？

Answer 1

我正面临着完全相同的问题……

更新:我更深入地研究了这个主题，结果发现这是本机基础中的一个已知问题。Checkbox在react原生中是可触摸不透明的，按钮也是按某种顺序组合视图的，这就是为什么你在这两种情况下都有问题的原因。

查看github中的本机基础问题：https://github.com/GeekyAnts/NativeBase/issues/3038

但是，我可以找到一种解决方法。这不是一个确切的复选框，我使用勾选图标来显示该项已被选中，并且我从本机基础迭代可触摸的不透明度。但是通过一些样式，我相信你可以创建一个复选框。

<scroll-view
  :content-container-style="{
    contentContainer: {
      paddingVertical: 20
    }
  }"
>
  <touchable-opacity
    v-for="(item, index) in dataArray"
    :key="index"
    :onPress="
      () => {
        checkItem(index)
      }
    "
  >
    <text>{{ item.time }} - {{ item.name }}</text>
    <image
      :style="{ height: 15, width: 15, marginLeft: 15 }"
      :source="require('../../../assets/icons/done.png')"
      v-if="item.checked"
    />
  </touchable-opacity>
</scroll-view>

在checkItem方法中，我使用splice并替换项以保持反应性：

methods: {
    checkItem(index) {
      this.dataArray[index].checked = true
      this.dataArray.splice(index, 1, this.dataArray[index])
    }
  },

我的dataArray是这样的数组：

[{id: 1, name: 'Name', checked: true}, {id: 2, name: 'Name', checked: false}]

我希望这将有助于解决你的问题。