react-native 当在子级滑动后删除一些子项时,ScrollView可能会引起一些混淆,

jljoyd4f  于 3个月前  发布在  React
关注(0)|答案(4)|浏览(65)

描述

使用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

zqry0prt

zqry0prt1#

⚠️React Native的新版本可用!
i️您正在使用受支持的次要版本,但似乎有一个更新的补丁可用 - 0.72.14。请升级到您次要版本的最高补丁或最新版本,并验证问题是否仍然存在(或者,创建一个新项目并在其中重现问题)。如果无法重现,请告知我们,以便我们关闭此问题。这有助于确保我们关注仍在最近版本中存在的问题。
ezykj2lf

ezykj2lf2#

⚠️缺失可复现示例
i️我们无法在您的问题报告中检测到可复现的示例。请提供以下内容:* 如果您的错误与UI相关:一个 Snack* 如果您的错误与构建/更新相关:使用我们的 Reproducer Template 。需要在您用户名下的GitHub仓库中有一个复现器。
xt0899hw

xt0899hw3#

请分享一个复制品@TallNutAlt

相关问题