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 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
Highcharts入门之简介
Aug 02 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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连mysql和oracle数据库性能比较
2006/10/09 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
js实现select下拉框选择
2020/01/11 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
python中的常量和变量代码详解
2018/07/25 Python
python的sorted用法详解
2019/06/25 Python
python实现列表的排序方法分享
2019/07/01 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
python温度转换华氏温度实现代码
2020/12/06 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
高中自我评价范文
2014/01/27 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
2014年端午节活动方案
2014/03/11 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
开除通知书范本
2015/04/25 职场文书
《假如》教学反思
2016/02/17 职场文书
对讲机的最大通讯距离是多少
2022/02/18 无线电
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers