React Native 通告消息竖向轮播组件的封装


Posted in Javascript onAugust 25, 2020

本文实例为大家分享了React Native通告消息竖向轮播组件的封装代码,供大家参考,具体内容如下

import React, {Component} from 'react'
import {
 Text,
 View,
 Animated,
 Easing,
 StyleSheet,
} from 'react-native'

export default class ScrollVertical extends Component {
 static defaultProps = {
  enableAnimation: true,
 };

 constructor(props) {
  super(props)
  let translateValue= new Animated.ValueXY({x: 0, y: 0})
  translateValue.addListener(({x,y})=>{
   // Log('value',x,y)
  })
  this.state = {
   translateValue: translateValue,
   // 滚屏高度
   scrollHeight: this.props.scrollHeight || 32,
   // 滚屏内容
   kb_content: [],
   // Animated.View 滚动到的 y轴坐标
   kb_tempValue: 0,
   // 最大偏移量
   kb_contentOffsetY: 0,
   // 每一次滚动切换之前延迟的时间
   delay: this.props.delay || 500,
   // 每一次滚动切换的持续时间
   duration: this.props.duration || 500,
   enableAnimation: true,
  }
 }

 render() {
  return (
   <View style={[styles.kbContainer, {height: this.state.scrollHeight}, this.props.kbContainer]}>
    {
     this.state.kb_content.length !== 0 ?
      <Animated.View
       style={[
        {flexDirection: 'column'},
        {
         transform: [
          {translateY: this.state.translateValue.y}
         ]
        }
       ]}>
       {this.state.kb_content.map(this._createKbItem.bind(this))}
      </Animated.View> : null
    }
   </View>
  )
 }

 componentWillReceiveProps(nextProps) {
  Log('componentWillReceiveProps', nextProps)
   this.setState({
     enableAnimation: nextProps.enableAnimation?true:false
    }, () => {
     this.startAnimation();
    }
   )
 }

 componentDidMount() {
  Log('componentDidMount')
  let content = this.props.data || []
  if (content.length !== 0) {
   let h = (content.length + 1) * this.state.scrollHeight
   this.setState({
    kb_content: content.concat(content[0]),
    kb_contentOffsetY: h
   })

   // 开始动画
   // this._startAnimation()
   this.startAnimation();
  }
 }


 _createKbItem(kbItem, index) {
  return (
   <View key={index}
     style={[{justifyContent: 'center', height: this.state.scrollHeight}, this.props.scrollStyle]}>
    <Text style={[styles.kb_text_c, this.props.textStyle]}>{kbItem.content}</Text>
   </View>
  )
 }

 startAnimation = () => {
  if (this.state.enableAnimation) {
   if(!this.animation){
    this.animation = setTimeout(() => {
     this.animation=null;
     this._startAnimation();
    }, this.state.delay);
   }

  }

 }

 componentWillUnmount() {
  if (this.animation) {
   clearTimeout(this.animation);
  }
  if(this.state.translateValue){
   this.state.translateValue.removeAllListeners();
  }
 }

 _startAnimation = () => {
  this.state.kb_tempValue -= this.state.scrollHeight;
  if (this.props.onChange) {
   let index = Math.abs(this.state.kb_tempValue) / (this.state.scrollHeight);
   this.props.onChange(index<this.state.kb_content.length-1?index:0);
  }
  Animated.sequence([

   // Animated.delay(this.state.delay),
   Animated.timing(
    this.state.translateValue,
    {
     isInteraction: false,
     toValue: {x: 0, y: this.state.kb_tempValue},
     duration: this.state.duration, // 动画持续的时间(单位是毫秒),默认为500
     easing: Easing.linear
    }
   ),
  ])
   .start(() => {
    // 无缝切换
    // Log('end')
    if (this.state.kb_tempValue - this.state.scrollHeight === -this.state.kb_contentOffsetY) {
     // 快速拉回到初始状态
     this.state.translateValue.setValue({x: 0, y: 0});
     this.state.kb_tempValue = 0;
    }
    this.startAnimation();



   })
 }
}

const styles = StyleSheet.create({
 kbContainer: {
  // 必须要有一个背景或者一个border,否则本身高度将不起作用
  backgroundColor: 'transparent',
  overflow: 'hidden'
 },
 kb_text_c: {
  fontSize: 18,
  color: '#181818',
 }

使用

import React, {Component} from 'react';
import {
 StyleSheet,
 View,
 TouchableOpacity,
 Alert,
 ScrollView,
 ART,
 TouchableHighlight,
 ListView,
 Dimensions,
 Text
} from 'react-native';

import ScrollVertical from '../../app-widget/scroll-vertical'


const dataArray = [
 {
  title: '降价了',
 },
 {
  title: '全场五折',
 },
 {
  title: '打到骨折',
 }
]
export default class extends React.Component {

 render() {
  let array = [{ content: '' }];
  if (dataArray && dataArray.length > 0) {
   array = [];
   for (let item of dataArray) {
    array.push({ content: item.title});
   }
  }
  return (
   <View style={{ padding: Constant.sizeMarginDefault, paddingBottom: 0, backgroundColor: '#FFFFFF' }}>
    <TouchableOpacity onPress={() => {
     if (dataArray && dataArray.length > 0) {
      Log(dataArray[this.index].title)
     }
    }} style={{ flexDirection: 'row', backgroundColor: "#FFFFFF", alignItems: 'center', borderRadius: 8, paddingLeft: 5, paddingRight: 5 }}>
     <Text style={{ fontSize: Constant.scaleFontSize(14) }} fontWeight={'bold'}>公告</Text>
     <View style={{ marginLeft: 5, marginRight: 8, backgroundColor: '#b01638', borderRadius: 8, width: 22, alignItems: 'center', }}>
      <Text style={{ color: 'white', fontSize: Constant.fontSizeSmall }}>新</Text>
     </View>
     <View style={{ flexDirection: 'row', flex: 1 }}>
      <ScrollVertical
       onChange={(index => {
        this.index = index;
       })}
       enableAnimation={true}
       data={array}
       delay={2500}
       duration={1000}
       scrollHeight={34}
       scrollStyle={{ alignItems: 'flex-start' }}
       textStyle={{ color: Constant.colorTxtContent, fontSize: Constant.fontSizeSmall }} />
     </View>
     <View style={{ height: 14, width: 1, backgroundColor: Constant.colorTxtContent }} />
     <Text style={{ color: Constant.colorTxtContent, paddingLeft: Constant.sizeMarginDefault, fontSize: Constant.fontSizeSmall }}>查看</Text>
    </TouchableOpacity>
   </View>
  );

 }
};

React Native 通告消息竖向轮播组件的封装

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

Javascript 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 #Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 #Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 #Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 #Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 #Javascript
详解基于Vue+Koa的pm2配置
Oct 24 #Javascript
Vue.js2.0中的变化小结
Oct 24 #Javascript
You might like
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
详解YII关联查询
2016/01/10 PHP
php文件上传类完整实例
2016/05/14 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
Vue js with语句原理及用法解析
2020/09/03 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python目录和文件处理总结详解
2019/09/02 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
党员2014两会学习心得体会
2014/03/17 职场文书
建筑工地大门标语
2014/06/18 职场文书
会计求职简历自我评价
2015/03/10 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
杨善洲观后感
2015/06/04 职场文书
公司行政管理制度范本
2015/08/05 职场文书
2019年教师入党申请书
2019/06/27 职场文书