使用 React Native 构建类似 Tinder 的加载器
在这篇文章中我会尝试描述在React Native中构建一个类似Tinder的加载器所遇到的调整 挑战1:布局
在上面的截图中,你可以看到头像和它后面的圆,都在屏幕正中间。 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 方法,并在一个循环重复动画,圆圈的动画就可以解决了。 animate() { this.anim.setValue(0); Animated.timing(this.anim,{ toValue: 1,duration: 3000,easing: Easing.in }) .start(this.animate.bind(this)); } 虽然它可以工作,并且代码看起来挺干净,但它有一个问题:我不能停止动画,它会不停的重复。 挑战3:交互
最后的挑战是与头像的交互。每次你点击它,一个新的圆圈会出现,而不会干扰前一个。这意味着,屏幕上可能同时有多个圆圈。我很快意识到,当前的代码无法运作。 setCircleInterval() { this.interval = setInterval(this.addCircle,3000); this.addCircle(); } addCircle() { this.setState({ circles: [...this.state.circles,this.counter] }); this.counter++; } 有一件事仍然未处理。只要用户按下不动,新头像就不再会被创建,直到在他释放屏幕之后才创建新的圆圈。 onAvatarPressIn() { clearInterval(this.interval); } onAvatarPressOut() { this.setCircleInterval(); } 结论这个练习花了一些时间,我对结果很满意。在 React Native 中创建 UI 非常有趣,我期待着从 React Native 中的流行应用程序构建其他组件。如果您有任何想法或愿望,请让我知道! 请查看Github上的完整代码。 谢谢阅读!
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |