建站
咨詢
售后
建站咨詢
新聞中心
在這篇文章中我會(huì)嘗試描述在React Native中構(gòu)建一個(gè)類似Tinder的加載器所遇到的調(diào)整我把它分成三個(gè)挑戰(zhàn)。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比城區(qū)網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式城區(qū)網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋城區(qū)地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。
挑戰(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)畫
React Native有一個(gè)動(dòng)畫庫(kù)，稱為Animated。我用它來(lái)放大圓圈并將其淡出。如果你知道如何使用 interpolate 方法，并在一個(gè)循環(huán)重復(fù)動(dòng)畫，圓圈的動(dòng)畫就可以解決了。
我知道，"react-native-animatable"庫(kù)提供了一個(gè)名為"iterationCount：infinitive"的屬性，但是Animated API沒有內(nèi)置這樣的功能。所以我不得不自己構(gòu)建它。
我的***個(gè)想法是遞歸。我創(chuàng)建了一個(gè)新的函數(shù)，它設(shè)置動(dòng)畫值為零，然后在回調(diào)中把值擴(kuò)展到1，當(dāng)動(dòng)畫完成后，我再次調(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ì)不停的重復(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)畫生命周期"。我仍然使用setInterval，但現(xiàn)在它創(chuàng)建一個(gè)新的圓圈，而不是管理動(dòng)畫。當(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();
- }
結(jié)論
這個(gè)練習(xí)花了一些時(shí)間，我對(duì)結(jié)果很滿意。在 React Native 中創(chuàng)建 UI 非常有趣，我期待著從 React Native 中的流行應(yīng)用程序構(gòu)建其他組件。如果您有任何想法或愿望，請(qǐng)讓我知道!
請(qǐng)查看Github上的完整代碼。
謝謝閱讀!
本文名稱：使用React Native構(gòu)建類似Tinder的加載器
當(dāng)前地址：http://www.dlmjj.cn/article/dhoeopp.html
