Detailed explanation of encapsulation of React Native notification message 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 (  { this.state.kb_content.length !== 0 ?  {this.state.kb_content.map(this._createKbItem.bind(this))}  : null }  ) } 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 (  {kbItem.content}  ) } 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 { // 无缝切换 // 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 (   { if (dataArray && dataArray.length > 0) { Log(dataArray[this.index].title) } }} style={{ flexDirection: 'row', backgroundColor: "#FFFFFF", alignItems: 'center', borderRadius: 8, paddingLeft: 5, paddingRight: 5 }}> 公告  新    { this.index = index; })} enableAnimation={true} data={array} delay={2500} duration={1000} scrollHeight={34} scrollStyle={{ alignItems: 'flex-start' }} textStyle={{ color: Constant.colorTxtContent, fontSize: Constant.fontSizeSmall }} />   查看   ); } };