基于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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
js实现圆形显示鼠标单击位置
Feb 11 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简单系统查询模块代码打包下载
2008/06/07 PHP
php xml文件操作代码(一)
2009/03/20 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
PHP基础学习小结
2011/04/17 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Python多线程的退出控制实现
2020/08/10 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
学院领导推荐信
2013/10/30 职场文书
售后专员岗位职责
2013/12/08 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
产品生产计划书
2014/05/07 职场文书
年检委托书
2014/08/30 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
辩护意见书
2015/06/04 职场文书
小人国观后感
2015/06/11 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android