使用 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