基于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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
Boostrap入门准备之border box
May 09 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
对联广告js flash激活
2006/10/19 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
Web开发之JavaScript
2012/03/29 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
python算法表示概念扫盲教程
2017/04/13 Python
Python单元测试实例详解
2018/05/25 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
实习护士自我鉴定
2013/10/13 职场文书
护士自我鉴定总结
2014/03/24 职场文书
合作经营协议书
2014/04/17 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS