问题描述:

        在鸿蒙系统中,发现react-native-snap-carousel组件写的轮播图在手势滑动时,,大约需要0.5秒-1秒的时间,插件会自动定位到完整图片的位置。

        客户需求,滑动后,不想要0.5秒-1秒的反应,可以直接定位到完整图片的位置,而不是半张图片的位置

现象描述:

假设: 屏幕宽度 x ;图片宽度 x ;

        react-native-snap-carousel 组件创建的轮播图,在Android系统上可以正常运行,滑动一次只会跳转到下一章图片,滚动距离也就是屏幕和图片的宽度 x ,而华为的鸿蒙系统,滑动一次,有时候会滚动 2x,3x,这种情况还可以接受。

但是 2.5x , 1.5x 这种距离,呈现效果就是 显示两个半张的图片,在大约 0.5秒到1秒的时间内,会自动定位到 整数倍 x 的距离,效果看起来显得有点卡。但是实际上并不是卡。

原因调查

        在查看了源码之后,发现这个组件是使用 <ScrollView> 或者 <FlatList> 这种组件实现的。而一次滑动多个,在这两种组件中是属于正常现象。

        这时候矛盾点就出现了,因为在 Google Android 上时可以一次展示一张图片的,而且 IOS 也可以显示这种效果,所以,组件本身应该是做了这种需求的,但是华为的鸿蒙系统并不能响应这种效果,很不理解。个人猜测,这应该是 鸿蒙系统 的问题,或者说,该组件对于鸿蒙系统来说有 Bug。

解决方案

因为组件是基于 ScrollView 实现的,而ScrollView具有分页功能,所以,我们使用 ScrollView 的分页效果来强制组件使用分页效果。而每页的宽度就需要是屏幕的宽度就可以了。

<Carousel
  pagingEnabled={true} // 启动 ScrollView 的分页效果
/>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐