如何使用React Native構(gòu)建類(lèi)似Tinder的加載器

這篇文章將為大家詳細(xì)講解有關(guān)如何使用React Native構(gòu)建類(lèi)似Tinder的加載器，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

嘗試描述在React Native中構(gòu)建一個(gè)類(lèi)似Tinder的加載器所遇到的調(diào)整我把它分成三個(gè)挑戰(zhàn)。

挑戰(zhàn)1：布局

在上面的截圖中，你可以看到頭像和它后面的圓，都在屏幕正中間。 感謝  Flexbox，通過(guò)添加"justifyContent:'center'"和"alignItems:'center'"，可以輕松地將元素水平和垂直居中。在這種情況下，我不得不居中兩個(gè)元素。我可以使用  Flexbox 作為頭像或圓圈。我選擇了頭像。對(duì)于背景圓我使用"position:absolute"和負(fù)邊距來(lái)完成我的目標(biāo)。

container: {   flex: 1,   justifyContent: 'center', // this centers the avatar vertically   alignItems: 'center', // this centers the avatar horizontally }, circle: {   width: circleSize,   height: circleSize,   position: 'absolute',   left: deviceWidth/2,   top: deviceHeight/2,   marginLeft: -circleSize/2,   marginTop: -circleSize/2 }

挑戰(zhàn)2：動(dòng)畫(huà)

React Native有一個(gè)動(dòng)畫(huà)庫(kù)，稱為Animated。我用它來(lái)放大圓圈并將其淡出。如果你知道如何使用 interpolate  方法，并在一個(gè)循環(huán)重復(fù)動(dòng)畫(huà)，圓圈的動(dòng)畫(huà)就可以解決了。

我知道，"react-native-animatable"庫(kù)提供了一個(gè)名為"iterationCount：infinitive"的屬性，但是Animated  API沒(méi)有內(nèi)置這樣的功能。所以我不得不自己構(gòu)建它。

我的***個(gè)想法是遞歸。我創(chuàng)建了一個(gè)新的函數(shù)，它設(shè)置動(dòng)畫(huà)值為零，然后在回調(diào)中把值擴(kuò)展到1，當(dāng)動(dòng)畫(huà)完成后，我再次調(diào)用該函數(shù)。

animate() {   this.anim.setValue(0);   Animated.timing(this.anim, {     toValue: 1,     duration: 3000,     easing: Easing.in   })   .start(this.animate.bind(this)); }

雖然它可以工作，并且代碼看起來(lái)挺干凈，但它有一個(gè)問(wèn)題：我不能停止動(dòng)畫(huà)，它會(huì)不停的重復(fù)。 我最終使用 setInverval 和 clearInterval  來(lái)創(chuàng)建了一個(gè)能夠被停止的循環(huán)。

挑戰(zhàn)3：交互

***的挑戰(zhàn)是與頭像的交互。每次你點(diǎn)擊它，一個(gè)新的圓圈會(huì)出現(xiàn)，而不會(huì)干擾前一個(gè)。這意味著，屏幕上可能同時(shí)有多個(gè)圓圈。我很快意識(shí)到，當(dāng)前的代碼無(wú)法運(yùn)作。  所以我創(chuàng)建了第二個(gè)組件，它代表一個(gè)單一的圓。每個(gè)圓圈都有自己的"動(dòng)畫(huà)生命周期"。我仍然使用setInterval，但現(xiàn)在它創(chuàng)建一個(gè)新的圓圈，而不是管理動(dòng)畫(huà)。當(dāng)您按下頭像時(shí)，會(huì)創(chuàng)建另一個(gè)圓圈。

setCircleInterval() {   this.interval = setInterval(this.addCircle, 3000);   this.addCircle(); } addCircle() {   this.setState({     circles: [...this.state.circles, this.counter]   });      this.counter++; }

有一件事仍然未處理。只要用戶按下不動(dòng)，新頭像就不再會(huì)被創(chuàng)建，直到在他釋放屏幕之后才創(chuàng)建新的圓圈。 幸運(yùn)的是，Touchable  組件有兩個(gè)事件，它們有助于處理這件事情：onPressIn 和  onPressOut。當(dāng)***個(gè)事件被調(diào)用時(shí)，間隔被清除，因此不會(huì)創(chuàng)建任何新的圓，當(dāng)?shù)诙€(gè)事件被觸發(fā)時(shí)，將再次設(shè)置間隔(會(huì)再創(chuàng)建圓圈)。

onAvatarPressIn() {   clearInterval(this.interval); } onAvatarPressOut() {   this.setCircleInterval(); }

關(guān)于“如何使用React Native構(gòu)建類(lèi)似Tinder的加載器”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。