Detailed explanation of encapsulation of React Native vertical carousel component

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: &#39;#FFFFFF&#39; }}>

        <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={&#39;bold&#39;}>公告</Text>

          <View style={{ marginLeft: 5, marginRight: 8, backgroundColor: &#39;#b01638&#39;, borderRadius: 8, width: 22, alignItems: &#39;center&#39;, }}>

            <Text style={{ color: &#39;white&#39;, fontSize: Constant.fontSizeSmall }}>新</Text>

          </View>

          <View style={{ flexDirection: &#39;row&#39;, 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>

    );

  }

};