在这篇文章中，我将尝试描述我在ReactNative中构建类似Tinder的加载器时遇到的调整。我将其分解为三个挑战。挑战一：布局在上面的截图中，你可以看到头像和它后面的圆圈，都在屏幕中间。感谢Flexbox，您可以通过添加“justifyContent:'center'”和“alignItems:'center'”轻松地使元素水平和垂直居中。在这种情况下，我必须将两个元素居中。我可以将flexbox用于头像或圆圈。我选择了一个头像。对于背景圈，我使用负边距的“position:absolute”来实现我的目标。container:{flex:1,justifyContent:'center',//thiscenterstheavatarverticallyalignItems:'center',//thiscenterstheavatarhorizo??ntally},circle:{width:circleSize,height:circleSize,position:'absolute',left:deviceWidth/2,top:deviceHeight/2,marginLeft:-circleSize/2,marginTop:-circleSize/2}挑战2：动画ReactNative有一个名为Animated的动画库。我用它来放大圆圈并将其淡出。如果知道使用interpolate方法，循环重复动画，圆的动画就可以解决了。我知道，“react-native-animatable”库提供了一个名为“iterationCount:infinitive”的属性，但是AnimatedAPI没有内置这样的功能。所以我不得不自己构建它。我的第一个想法是递归。我创建了一个将动画值设置为零的新函数，然后在回调中将该值缩放为1，当动画完成时，我再次调用该函数。animate(){this.anim.setValue(0);Animated.timing(this.anim,{toValue:1,duration:3000,easing:Easing.in}).start(this.animate.bind(this));虽然它可以工作，并且代码看起来很干净，但它有一个问题：我无法停止动画，它只是不断重复。我最终使用setInverval和clearInterval创建了一个可以停止的循环。挑战三：交互最大的挑战是与头像的交互。每次点击它，都会出现一个新的圆圈，而不会干扰之前的圆圈。这意味着，屏幕上可能同时出现多个圆圈。我很快意识到当前的代码行不通。所以我创建了第二个组件，它代表一个圆圈。每个圈子都有自己的“动画生命周期”。我仍然使用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();}结论这个练习花了一些时间，我对结果很满意。在ReactNative中创建UI非常有趣，我期待着在ReactNative中从流行的应用程序构建其他组件。如果您有任何想法或愿望，请告诉我！查看Github上的完整代码。谢谢阅读！
