摘要：本著我為人人，人人為我的精神，敲過的代碼就要分享出來項(xiàng)目需要做一個(gè)文字的輪播，開始想著是由下而上的滾動(dòng)，但是還是寫的不是很好，就先退而求其次，通過透明度來實(shí)現(xiàn)文字的滾動(dòng)了也不能說是滾動(dòng)了，是切換。有問題的可以在下留言面。

本著我為人人，人人為我的精神，敲過的代碼就要分享出來！

項(xiàng)目需要做一個(gè)文字的輪播，開始想著是由下而上的滾動(dòng)，但是還是寫的不是很好，就先退而求其次，通過透明度來實(shí)現(xiàn)文字的滾動(dòng)了（也不能說是滾動(dòng)了，是切換）。

為了貼上來還是寫了些注釋的，也就不一一的解釋了，很簡單的代碼，看注釋就好了。（我就是懶）

import React, { Component } from "react"
import { View, Text, TouchableOpacity } from "react-native"

export default class TextLantern extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nowText: "", // 顯示的文本
            opacity: 1, // 透明度
            index: 0, // 下標(biāo)
            list: [], // 滾動(dòng)的列表
        }
    }

    componentWillMount() {
        const { list } = this.props
        this.setState({
            nowText: list[0].title, // 插入顯示的文本
            list, // 滾動(dòng)的列表
        })
        this.onStart() // 啟動(dòng)計(jì)時(shí)器 A
    }

    onStart = () => {
        const { Intervals = 5000 } = this.props // Intervals 可為參數(shù)非必傳
        this.timer = setInterval(() => {
            this.onDisappear() // 間隔Intervals毫秒啟動(dòng)計(jì)時(shí)器B
        }, Intervals)
    };

    onDisappear = () => {
        this.timer1 = setInterval(() => {
            const { opacity, index, list } = this.state
            if (opacity === 0) {
                // 當(dāng)透明度為0時(shí)候開始顯示在一個(gè)文本
                if (index + 2 > list.length) {
                    // 當(dāng)前顯示的文本為最后一個(gè)時(shí) 重頭再來
                    this.setState({
                        nowText: list[0].title,
                        index: 0,
                    })
                } else {
                    this.setState({
                        nowText: list[index + 1].title, // 下一個(gè)文本
                        index: index + 1,
                    })
                }
                this.onAppear() // 顯示
                clearInterval(this.timer1)
                return
            }
            this.setState({
                opacity: parseFloat(Math.abs(opacity - 0.04).toFixed(2)),
            })
        }, 20)
    };

    onAppear = () => {
        this.timer2 = setInterval(() => {
            const { opacity } = this.state
            if (opacity === 1) {
                clearInterval(this.timer2)
                return
            }
            this.setState({
                opacity: parseFloat(Math.abs(opacity + 0.04).toFixed(2)),
            })
        }, 20)
    };

    render() {
        const { nowText, opacity, list, index } = this.state
        return (
            
                 {console.log(list[index].address)}}>
                    
                        
                            {nowText}
                        
                    
                
            
        )
    }
}

const tProps = {
            list: [
                { id: 1, title: "不是這件事很難，而是每件事都難", address: 1 },
                { id: 2, title: "穩(wěn)食姐，犯法啊", address: 2 },
                { id: 3, title: "夜半訴心聲，何須太高清", address: 3 },
                { id: 4, title: "失戀唱情歌，即是漏煤氣關(guān)窗", address: 4 },
            ],
        }

...

點(diǎn)擊跳轉(zhuǎn)說一下我的做法：

通過當(dāng)前的 index 來拿出對應(yīng)的address進(jìn)行跳轉(zhuǎn)。

react要用的話改一下標(biāo)簽就好了。

好了好了。有問題的可以在下留言面。