国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

react native 文字輪播

jayce / 2200人閱讀

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

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

項目需要做一個文字的輪播,開始想著是由下而上的滾動,但是還是寫的不是很好,就先退而求其次,通過透明度來實現文字的滾動了(也不能說是滾動了,是切換)。

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

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, // 下標
            list: [], // 滾動的列表
        }
    }

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

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

    onDisappear = () => {
        this.timer1 = setInterval(() => {
            const { opacity, index, list } = this.state
            if (opacity === 0) {
                // 當透明度為0時候開始顯示在一個文本
                if (index + 2 > list.length) {
                    // 當前顯示的文本為最后一個時 重頭再來
                    this.setState({
                        nowText: list[0].title,
                        index: 0,
                    })
                } else {
                    this.setState({
                        nowText: list[index + 1].title, // 下一個文本
                        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: "穩食姐,犯法啊", address: 2 },
                { id: 3, title: "夜半訴心聲,何須太高清", address: 3 },
                { id: 4, title: "失戀唱情歌,即是漏煤氣關窗", address: 4 },
            ],
        }

...

點擊跳轉說一下我的做法:

通過當前的 index 來拿出對應的address進行跳轉。

react要用的話改一下標簽就好了。

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96289.html

相關文章

  • 移動開源項目周報1208

    摘要:由出品的移動開源項目周報第一期來啦。我們的移動開源周報集合了一周來新收錄的優質的移動開發方面的開源項目,方便移動開發人員便捷的找到自己需要的項目工具等。 由OpenDigg 出品的移動開源項目周報第一期來啦。我們的移動開源周報集合了OpenDigg一周來新收錄的優質的移動開發方面的開源項目,方便移動開發人員便捷的找到自己需要的項目工具等。 安卓開發 BigImageViewer 支持...

    Songlcy 評論0 收藏0
  • 小哥哥小姐姐看過來,這里有個組件庫需要您簽收一下

    摘要:如果你想減少包大小,你可以這樣引入事實上,每個組件都是支持單獨安裝的,我們也推薦你使用這種方式引入組件。以下是運行示例后各界面的截圖組件圖標右上角的圓形徽標數字。 1. 前言 一直以來都想做個組件庫,一方面是對工作中常遇問題的總結,另一方面也確實能夠提升工作效率(誰又不想造一個屬于自己的輪子呢~),于是乎就有了本文的主角兒rn-components-kit。 市面上web的UI組件庫如...

    Alan 評論0 收藏0
  • ReactNative開發常用的三方模塊

    摘要:寫在前面一個好的缺不了好的三方支持,生活在這個活躍的開源社區,尋找合適的三方組件是一個開發者最基本的能力。下面分享幾個我收集的三方模塊,希望對大家有點幫助。 寫在前面 一個好的App缺不了好的三方支持,生活在ReactNative這個活躍的開源社區,尋找合適的三方組件是一個開發者最基本的能力。不過不積跬步,無以至千里,不積小流,無以成江海。下面分享幾個我收集的三方模塊,希望對大家有點幫...

    frolc 評論0 收藏0

發表評論

0條評論

jayce

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<