描述

使用scrollView删除子项时的触摸混淆
<ScrollView showsHorizontalScrollIndicator={false} style={{ marginLeft: moderateScale(10), borderWidth: 2, flex: 1, overflow: 'hidden', }} bounces={false} horizontal={true}> {selectedCities.map((item, index) => { return ( <TouchableOpacity activeOpacity={1} onPress={() => { toggleCitySelection({ provinceName: item.provinceName, cityName: item.areaName || item.cityName, }); }} style={{ backgroundColor: '#E9F3FF', marginLeft: moderateScale(5), paddingVertical: moderateScale(8), paddingHorizontal: moderateScale(10), paddingRight: moderateScale(20), borderRadius: moderateScale(4), position: 'relative', }} key={index}> <View> <Text style={{ color: '#3B97F5', fontSize: moderateScale(14), }}> {item.areaName || (item.cityName === '全市' ? item.provinceName : item.cityName) || item.provinceName} </Text> </View> <View style={{ position: 'absolute', right: 0, top: 0, width: moderateScale(15), height: moderateScale(15), backgroundColor: '#3C98FF', borderRadius: moderateScale(2), opacity: 0.5, }}> <Image style={{ width: moderateScale(15), height: moderateScale(15), }} source={require('../static/image/whitecha.png')} /> </View> </TouchableOpacity> ); })} <View style={{width: moderateScale(20)}} /> </ScrollView>

重现步骤

请观看视频。当滚动视图滚动时，删除子项会导致问题。然而，在不滚动的情况下删除项目是正常的
<ScrollView showsHorizontalScrollIndicator={false} style={{ marginLeft: moderateScale(10), borderWidth: 2, flex: 1, overflow: 'hidden', }} bounces={false} horizontal={true}> {selectedCities.map((item, index) => { return ( <TouchableOpacity activeOpacity={1} onPress={() => { toggleCitySelection({ provinceName: item.provinceName, cityName: item.areaName || item.cityName, }); }} style={{ backgroundColor: '#E9F3FF', marginLeft: moderateScale(5), paddingVertical: moderateScale(8), paddingHorizontal: moderateScale(10), paddingRight: moderateScale(20), borderRadius: moderateScale(4), position: 'relative', }} key={index}> <View> <Text style={{ color: '#3B97F5', fontSize: moderateScale(14), }}> {item.areaName || (item.cityName === '全市' ? item.provinceName : item.cityName) || item.provinceName} </Text> </View> <View style={{ position: 'absolute', right: 0, top: 0, width: moderateScale(15), height: moderateScale(15), backgroundColor: '#3C98FF', borderRadius: moderateScale(2), opacity: 0.5, }}> <Image style={{ width: moderateScale(15), height: moderateScale(15), }} source={require('../static/image/whitecha.png')} /> </View> </TouchableOpacity> ); })} <View style={{width: moderateScale(20)}} /> </ScrollView>

React Native版本

0.72.4

受影响的平台

运行时-Android

npx react-native info的输出

System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
  Memory: 4.02 GB / 15.73 GB
Binaries:
  Node:
    version: 20.11.1
    path: D:\SDK\node.EXE
  Yarn:
    version: 1.22.22
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 10.2.4
    path: D:\SDK\npm.CMD
  Watchman:
    version: 20231008.002904.0
    path: C:\ProgramData\chocolatey\lib\watchman\tools\watchman-v2023.10.09.00-windows\bin\watchman.EXE
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio: Not Found
Languages:
  Java: 17.0.8
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.4
    wanted: 0.72.4
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

堆栈跟踪或日志

No logs

复现器

scrollView

截图和视频

24e71b7b1f3768e4de24f2cff58a930a.mp4