国外网站 网站 推荐,工程业绩在建设厅网站都能查到,网站开发及服务合同模板,义乌网站制作公司轮播图#xff0c;在app中随处可见#xff0c;这么重要的功能我们怎么可能不学习下在react-native中的实现方式。 依然是第三方组件react-native-swiper
官网地址
https://www.npmjs.com/package/react-native-swiper
组件使用的组件及事件参考官方即可。
实现效果
官网…轮播图在app中随处可见这么重要的功能我们怎么可能不学习下在react-native中的实现方式。 依然是第三方组件react-native-swiper
官网地址
https://www.npmjs.com/package/react-native-swiper
组件使用的组件及事件参考官方即可。
实现效果
官网示例实现 业务需求实现
代码实现
import {View,Text,Image,StyleSheet,Dimensions,ScrollView,
} from react-native;
import {useEffect, useState} from react;
import Logo from ../../assets/images/logo.png;
import Ionicons from react-native-vector-icons/Ionicons;
import Swiper from react-native-swiper;function HomeScreen() {const windowWidth Dimensions.get(window).width;return (Viewstyle{{flex: 1,justifyContent: flex-start,alignItems: center,width: 100%,backgroundColor: #F5FCFF,}}View style{styles.box}Swiper style{styles.swiper} height{200} horizontal{true} autoplayImagesource{{uri: https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1o9rRO.img?w768h538m6x297y153s399d155,}}style{styles.img}/Imagesource{{uri: https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1r4EGh.img?w640h427m6x160y169s82d82,}}style{styles.img}/Imagesource{{uri: https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1r4vmA.img?w640h360m6x198y83s103d103,}}style{styles.img}//Swiper/View/View);
}
const styles StyleSheet.create({img: {width: Dimensions.get(window).width,height: 200,resizeMode: cover,},box: {height: 200,backgroundColor: #F5FCFF,},
});
export default HomeScreen;bug修复
可能是截图软件的原因没有捕捉到轮播在自动循环播放的时候会出现闪烁的闪电现象。后来发现好多人遇到我这里是使用模拟器不知道真机效果是不是也这样。
修复方式 removeClippedSubviews{false}在组件上加上这个配置即可修复闪烁现象
SwiperremoveClippedSubviews{false}style{styles.swiper}height{200}horizontal{true}autoplayImagesource{{uri: https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1o9rRO.img?w768h538m6x297y153s399d155,}}style{styles.img}/Imagesource{{uri: https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1r4EGh.img?w640h427m6x160y169s82d82,}}style{styles.img}/Imagesource{{uri: https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1r4vmA.img?w640h360m6x198y83s103d103,}}style{styles.img}//Swiper官方issue没关闭但是有老外解决了 https://github.com/leecade/react-native-swiper/issues/1267
