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

本文实例为大家分享了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>
    );

  }
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。