【RN】跑马灯组件实例

外层调用

let text=[
            {text:'1111',link:'1234124'},
            {text:'2222',link:'1234124'},
        ]

  

import React, {Component} from 'react';
import {
    View,
    Text,
    Image, TouchableOpacity,
    StyleSheet, Animated
} from 'react-native';
import {Images} from "../util/Images";

const maxTop = 50
export default class Carousel extends Component {

    static defaultProps = {
        style: {}, //组件容器paddingTop的值
        text: '', //跑马灯显示的文字, 如果传入数组，则有跑马灯特效
        to: 'bottom', //跑马灯滚动方向，默认从上向下 top/bottom
        height: 40, //跑马灯的默认高度,
        time: 4000,//多长时间滚动一次，默认4s
        duration:2000,//动画持续时间
    }

    constructor(props) {
        super(props);
        this.state = {
            textArr: [],   //自定义SideToast内容
        }
        this.maxTop = this.props.height / 2 + this._getFontSize() / 2 //当前展示文字滚动出去所需的top=容器高度/2 +字的大小/2

        this.showViewTop1 = new Animated.Value(0)
        this.showViewTop2 = new Animated.Value(-this.maxTop)
        this.isArray=false
    }

    _getFontSize = () => {
        if (this.props.style && this.props.style.fontSize) {
            let fontSize = parseInt(this.props.fontSize)
            return fontSize
        }

        if (styles && styles.textStyle) {
            return styles.textStyle.fontSize
        }
    }

    componentDidMount() {
        const {text}=this.props

        if (text instanceof Array && text.length>1) {
            console.log('==hugo 是数组：'+JSON.stringify(text))
            this.setState({
                textArr:text
            },()=>{
                this.startAnimateTimer()
            })
        }else{
            console.log('==hugo 是字符串')
            this.setState({
                textArr:[{text,link:''}]
            })
        }


    }
    startAnimateTimer=()=>{
        let {time,duration}=this.props
        const {textArr}=this.state
        let _textArr=textArr
        this.timer=setTimeout(()=>{
            Animated.parallel([
                Animated.spring(this.showViewTop1, {
                    toValue: this.maxTop,
                    duration,
                    tension:10,
                }),
                Animated.spring(this.showViewTop2, {
                    toValue: 0,
                    duration,
                    tension:10,
                })
            ]).start(()=>{
                //动画完成时的回调
                this.showViewTop1=new Animated.Value(-this.maxTop)
                _textArr.push(_textArr[0])
                _textArr[0]=!!_textArr[2]?_textArr[2]:_textArr[1]
                this.setState({textArr:[..._textArr]},()=>{
                    _textArr=this.state.textArr
                    console.log('!!!!1:'+JSON.stringify(_textArr))
                    setTimeout(()=>{
                        Animated.parallel([
                            Animated.spring(this.showViewTop1, {
                                toValue: 0,
                                duration:2000,
                                tension:10,
                            }),
                            Animated.spring(this.showViewTop2, {
                                toValue:this.maxTop,
                                duration,
                                tension:10,
                            })
                        ]).start(()=>{
                            //动画完成时的回调
                            this.showViewTop2=new Animated.Value(-this.maxTop)
                            _textArr.push(_textArr[1])
                            _textArr.shift()
                            _textArr.shift()
                            this.setState({textArr:[..._textArr]},()=>{
                                console.log('!!!!2:'+JSON.stringify(_textArr))
                                this.startAnimateTimer()
                            })
                        })
                    },time-duration)
                })

            })
        },time-duration)
    }

    renderTextView = () => {
        const {textArr}=this.state
        console.log('==hugo arr:'+JSON.stringify(textArr))
        if (textArr.length>1) {
            //是数组，采用跑马灯的效果
            return 
                
                    
                        {textArr[1]&&textArr[1].text}
                    
                


                
                    
                        {textArr[0]&&textArr[0].text}
                    
                
            
        }else{
            //是字符串，无跑马灯效果,取数组的第一个元素
            return  
                {textArr[0] && textArr[0].text}
            
        }

    }

    render() {
        const {top, height} = this.props
        return 

            {this.renderTextView()}

            
                
            
        

    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f8e15f',
        borderRadius: 5,
        flexDirection: 'row',
        alignItems: 'center',
        overflow:'hidden'
    },
    textStyle: {
        marginLeft: 8,
        fontSize: 16
    },
    imageStyle: {
        alignSelf: 'flex-end',
        width: 36,
        height: 36
    }
});