react native 文字轮播的实现示例


Posted in Javascript onJuly 27, 2018

本着我为人人,人人为我的精神,敲过的代码就要分享出来!

项目需要做一个文字的轮播,开始想着是由下而上的滚动,但是还是写的不是很好,就先退而求其次,通过透明度来实现文字的滚动了(也不能说是滚动了,是切换)。

为了贴上来还是写了些注释的,也就不一一的解释了,很简单的代码,看注释就好了。(我就是懒)

import React, { Component } from "react"
import { View, Text, TouchableOpacity } from "react-native"

export default class TextLantern extends Component {
  constructor(props) {
    super(props)
    this.state = {
      nowText: "", // 显示的文本
      opacity: 1, // 透明度
      index: 0, // 下标
      list: [], // 滚动的列表
    }
  }

  componentWillMount() {
    const { list } = this.props
    this.setState({
      nowText: list[0].title, // 插入显示的文本
      list, // 滚动的列表
    })
    this.onStart() // 启动计时器 A
  }

  onStart = () => {
    const { Intervals = 5000 } = this.props // Intervals 可为参数非必传
    this.timer = setInterval(() => {
      this.onDisappear() // 间隔Intervals毫秒启动计时器B
    }, Intervals)
  };

  onDisappear = () => {
    this.timer1 = setInterval(() => {
      const { opacity, index, list } = this.state
      if (opacity === 0) {
        // 当透明度为0时候开始显示在一个文本
        if (index + 2 > list.length) {
          // 当前显示的文本为最后一个时 重头再来
          this.setState({
            nowText: list[0].title,
            index: 0,
          })
        } else {
          this.setState({
            nowText: list[index + 1].title, // 下一个文本
            index: index + 1,
          })
        }
        this.onAppear() // 显示
        clearInterval(this.timer1)
        return
      }
      this.setState({
        opacity: parseFloat(Math.abs(opacity - 0.04).toFixed(2)),
      })
    }, 20)
  };

  onAppear = () => {
    this.timer2 = setInterval(() => {
      const { opacity } = this.state
      if (opacity === 1) {
        clearInterval(this.timer2)
        return
      }
      this.setState({
        opacity: parseFloat(Math.abs(opacity + 0.04).toFixed(2)),
      })
    }, 20)
  };

  render() {
    const { nowText, opacity, list, index } = this.state
    return (
      <View style={{ borderWidth: 1, margin: 10, padding: 5, borderColor: "#dddddd" }}>
        <TouchableOpacity activeOpacity={0.75} onPress={() => {console.log(list[index].address)}}>
          <View style={{ width: "80%" }}>
            <Text
              style={{
                opacity,
                fontSize: 14,
              }}
            >
              {nowText}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    )
  }
}

引用:

const tProps = {
      list: [
        { id: 1, title: "不是这件事很难,而是每件事都难", address: 1 },
        { id: 2, title: "稳食姐,犯法啊", address: 2 },
        { id: 3, title: "夜半诉心声,何须太高清", address: 3 },
        { id: 4, title: "失恋唱情歌,即是漏煤气关窗", address: 4 },
      ],
    }

...

<TextLantern {...tProps} />

点击跳转说一下我的做法:

通过当前的 index 来拿出对应的address进行跳转。

react要用的话改一下标签就好了。

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

Javascript 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
跟我学习javascript的循环
Nov 18 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 #Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 #Javascript
在vue中使用Autoprefixed的方法
Jul 27 #Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 #Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 #Javascript
Vue头像处理方案小结
Jul 26 #Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 #Javascript
You might like
php HandlerSocket的使用
2011/05/02 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python三级目录展示的实现方法
2016/09/28 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Python flask框架端口失效解决方案
2020/06/04 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
python中关于数据类型的学习笔记
2020/07/19 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
六道php面试题附答案
2014/06/05 面试题
七一党建活动方案
2014/01/28 职场文书
工作违纪检讨书
2014/02/17 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
高中教师评语大全
2014/04/25 职场文书
学习雷锋活动总结
2014/04/29 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python