使用 React Native 構建相似 Tinder 的加載器

在這篇文章中我會嘗試描述在React Native中構建一個相似Tinder的加載器所遇到的調整
我把它分紅三個挑戰。

挑戰1：佈局

在上面的截圖中，你能夠看到頭像和它後面的圓，都在屏幕正中間。
感謝 Flexbox，經過添加"justifyContent:'center'"和"alignItems:'center'"，能夠輕鬆地將元素水平和垂直居中。在這種狀況下，我不得不居中兩個元素。我可使用 Flexbox 做爲頭像或圓圈。我選擇了頭像。對於背景圓我使用"position:absolute"和負邊距來完成個人目標。

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
}

挑戰2：動畫

React Native有一個動畫庫，稱爲Animated。我用它來放大圓圈並將其淡出。若是你知道如何使用 interpolate 方法，並在一個循環重複動畫，圓圈的動畫就能夠解決了。
我知道，"react-native-animatable"庫提供了一個名爲"iterationCount：infinitive"的屬性，可是Animated API沒有內置這樣的功能。因此我不得不本身構建它。
個人第一個想法是遞歸。我建立了一個新的函數，它設置動畫值爲零，而後在回調中把值擴展到1，當動畫完成後，我再次調用該函數。

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

雖然它能夠工做，而且代碼看起來挺乾淨，但它有一個問題：我不能中止動畫，它會不停的重複。
我最終使用 setInverval 和 clearInterval 來建立了一個可以被中止的循環。

挑戰3：交互

最後的挑戰是與頭像的交互。每次你點擊它，一個新的圓圈會出現，而不會干擾前一個。這意味着，屏幕上可能同時有多個圓圈。我很快意識到，當前的代碼沒法運做。
因此我建立了第二個組件，它表明一個單一的圓。每一個圓圈都有本身的"動畫生命週期"。我仍然使用setInterval，但如今它建立一個新的圓圈，而不是管理動畫。當您按下頭像時，會建立另外一個圓圈。

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

有一件事仍然未處理。只要用戶按下不動，新頭像就再也不會被建立，直到在他釋放屏幕以後才建立新的圓圈。
幸運的是，Touchable 組件有兩個事件，它們有助於處理這件事情：onPressIn 和 onPressOut。當第一個事件被調用時，間隔被清除，所以不會建立任何新的圓，當第二個事件被觸發時，將再次設置間隔（會再建立圓圈）。

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

結論

這個練習花了一些時間，我對結果很滿意。在 React Native 中建立 UI 很是有趣，我期待着從 React Native 中的流行應用程序構建其餘組件。若是您有任何想法或願望，請讓我知道！

請查看Github上的完整代碼。

謝謝閱讀！

---

原文做者：Yousef Kama 原文連接：http://t.cn/RtnSJwA
翻譯自力譜宿雲LeapCloud旗下MaxLeap團隊_UX成員：Jason
本文首發自MaxLeap官網：https://maxleap.cn/
歡迎關注微信公衆號：MaxLeap_yidongyanfa