Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use React Native to build a loader similar to Tinder. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Try to describe the tweaks involved in building a Tinder-like loader in React Native. I've divided it into three challenges.

Challenge 1: layout

In the screenshot above, you can see the avatar and the circle behind it, both in the middle of the screen. Thanks to Flexbox, you can easily center elements horizontally and vertically by adding "justifyContent:'center'" and "alignItems:'center'". In this case, I have to be in the middle of two elements. I can use Flexbox as an avatar or circle. I chose the avatar. For the background circle, I use "position:absolute" and negative margins to achieve my goal.

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}

Challenge 2: animation

React Native has an animation library called Animated. I use it to enlarge the circle and fade it out. If you know how to use the interpolate method and repeat the animation in a loop, the circle animation can be solved.

I know that the "react-native-animatable" library provides a property called "iterationCount:infinitive", but Animated API does not have such a built-in feature. So I had to build it myself.

My idea is recursion. I created a new function that sets the animation value to zero, then expands the value to 1 in the callback, and when the animation is complete, I call the function again.

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

Although it works and the code looks clean, it has a problem: I can't stop the animation, it repeats over and over again. I finally used setInverval and clearInterval to create a loop that could be stopped.

Challenge 3: interaction

The challenge is to interact with the avatar. Every time you click on it, a new circle appears without interfering with the previous one. This means that there may be multiple circles on the screen at the same time. I soon realized that the current code didn't work. So I created the second component, which represents a single circle. Each circle has its own "animation life cycle". I still use setInterval, but now it creates a new circle instead of managing animation. When you press the avatar, another circle is created.

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

There is one thing that remains unsolved. As long as the user presses and does not move, the new avatar is no longer created, and the new circle is not created until he releases the screen. Fortunately, the Touchable component has two events that help handle this: onPressIn and onPressOut. When * events are called, the interval is cleared, so no new circles are created, and when the second event is triggered, the interval is set again (the circle is created again).

OnAvatarPressIn () {clearInterval (this.interval);} onAvatarPressOut () {this.setCircleInterval ();} this article on "how to use React Native to build a loader similar to Tinder" ends here. I hope the above content can be helpful to you, so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.