外層調(diào)用

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

  <Carousel text />

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: '', //跑馬燈顯示的文字, 如果傳入數(shù)組骏掀，則有跑馬燈特效
        to: 'bottom', //跑馬燈滾動(dòng)方向毫玖，默認(rèn)從上向下 top/bottom
        height: 40, //跑馬燈的默認(rèn)高度,
        time: 4000,//多長時(shí)間滾動(dòng)一次，默認(rèn)4s
        duration:2000,//動(dòng)畫持續(xù)時(shí)間
    }

    constructor(props) {
        super(props);
        this.state = {
            textArr: [],   //自定義SideToast內(nèi)容
        }
        this.maxTop = this.props.height / 2 + this._getFontSize() / 2 //當(dāng)前展示文字滾動(dòng)出去所需的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 是數(shù)組：'+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(()=>{
                //動(dòng)畫完成時(shí)的回調(diào)
                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(()=>{
                            //動(dòng)畫完成時(shí)的回調(diào)
                            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) {
            //是數(shù)組施无，采用跑馬燈的效果
            return <View style={{flex:1}}>
                <Animated.View style={[{position: 'absolute'},{width: '90%', top: this.showViewTop2}]}>
                    <Text numberOfLines={1}
                          ellipsizeMode={'tail'}
                          style={[styles.textStyle]}>
                        {textArr[1]&&textArr[1].text}
                    </Text>
                </Animated.View>


                <Animated.View style={{width: '90%',top: this.showViewTop1}}>
                    <Text numberOfLines={1}
                          ellipsizeMode={'tail'}
                          style={[styles.textStyle]}>
                        {textArr[0]&&textArr[0].text}
                    </Text>
                </Animated.View>
            </View>
        }else{
            //是字符串，無跑馬燈效果,取數(shù)組的第一個(gè)元素
            return  <Text numberOfLines={1}
                  ellipsizeMode={'tail'}
                  style={[styles.textStyle, {width: '90%'}]}>
                {textArr[0] && textArr[0].text}
            </Text>
        }

    }

    render() {
        const {top, height} = this.props
        return <View style={[styles.container, {paddingTop: top, height}, this.props.style]}>

            {this.renderTextView()}

            <View style={{flex: 1}}>
                <Image style={styles.imageStyle} resizeMode={'stretch'} source={require('XXXX')}/>
            </View>
        </View>

    }
}
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
    }
});