基于React Native 0.52实现轮播图效果


Posted in Javascript onAugust 25, 2020

本文基于React Native 0.52

Demo上传到Git了,有需要可以看看,写了新内容会上传的(Git地址)

一、总览

轮播图几乎是必备的效果,这里选择 react-native-swiper 来实现,效果如下图:

基于React Native 0.52实现轮播图效果

二、实现轮播图效果

1、通过npm安装react-native-swiper

npm install react-native-swiper --save

2、在recommend.js引入react-native-swiper

import Swiper from 'react-native-swiper';

3、用 react-native-swiper 可以很容易的实现轮播的效果

  • showButtons —— 是否显示左右翻页按钮
  • autoPlay —— 是否自动播放
  • paginationStyle —— 包含小点点的容器的样式,这里用来调整位置
  • dotStyle —— 小点点的样式
  • activeDotStyle —— 当前被激活的小点点的样式
<Swiper
  style={styles.wrapper}
  height={width*40/75}
  showsButtons={false}
  autoplay={true}
  paginationStyle={styles.paginationStyle}
  dotStyle={styles.dotStyle}
  activeDotStyle={styles.activeDotStyle}
>
  <Image source={require('../../img/1.jpg')} style={styles.bannerImg} />
  <Image source={require('../../img/2.jpg')} style={styles.bannerImg} />
  <Image source={require('../../img/3.jpg')} style={styles.bannerImg} />
  <Image source={require('../../img/4.jpg')} style={styles.bannerImg} />
  <Image source={require('../../img/3.jpg')} style={styles.bannerImg} />
</Swiper>

样式:

const styles = StyleSheet.create({
 container: {
  flex: 1,
  alignItems: 'center',
  backgroundColor: '#fff',
 },
 bannerImg: {
  height: width*40/75,
  width: width,
 },
 wrapper: {
  width: width,
 },
 paginationStyle: {
  bottom: 6,
 },
 dotStyle: {
  width: 22,
  height: 3,
  backgroundColor:'#fff',
  opacity: 0.4,
  borderRadius: 0,
 },
 activeDotStyle: {
  width: 22,
  height: 3,
  backgroundColor:'#fff',
  borderRadius: 0,
 },
});

三、解决不显示问题

轮播图放在APP的首页,同样有不显示的问题,解决办法和上一篇的办法几乎一样,可以看一下上一篇或是完整代码,这里就不再赘述。

这里和上一篇相比有两处不一样,需要说一下。

1、真正调用接口加载图片的时候,不会出现一开始图片不显示的问题。

2、在状态为false的时候,先显示第一张图片

if (this.state.swiperShow) {
 return (
  <Swiper >
   …………略
  </Swiper>
 )
} else {
 return (
  <View style={{ height: width*40/75 }}>
   <Image source={require('../../img/1.jpg')} style={styles.bannerImg} />
  </View>
 );
}

recommend.js完整代码 地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript椭圆旋转相册实现代码
Jan 16 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 #Javascript
微信小程序列表中item左滑删除功能
Nov 07 #Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 #Javascript
VueCli3构建TS项目的方法步骤
Nov 07 #Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 #Javascript
vue+webpack中配置ESLint
Nov 07 #Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 #Javascript
You might like
php 不同编码下的字符串长度区分
2009/09/26 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
Add a Table to a Word Document
2007/06/15 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
angularjs 缓存的使用详解
2018/03/19 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python中optparser库用法实例详解
2018/01/26 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
《果园机器人》教学反思
2014/04/13 职场文书
企业领导对照检查材料
2014/08/20 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
西安导游词
2015/02/12 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
python实现进度条的多种实现
2021/04/29 Python
python实现的人脸识别打卡系统
2021/05/08 Python
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL