使用 React Native 构建类似 Tinder 的加载器

Render 发布于2019-08-20 12:08 / 1536人阅读

摘要：在这篇文章中我会尝试描述在中构建一个类似的加载器所遇到的调整我把它分成三个挑战。我最终使用和来创建了一个能够被停止的循环。有一件事仍然未处理。幸运的是，组件有两个事件，它们有助于处理这件事情和。

在这篇文章中我会尝试描述在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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80819.html

初次尝试使用typescript开发react-native

摘要：搭建开发环境安装和命令行工具是提供的替代的工具，可以加速模块的下载。的命令行工具用于执行创建初始化更新项目运行打包服务等任务。 typescript是javascript的超集，在javascript的基础上添加了可选的静态类型，非常适合团队开，这次我们尝试使用typescript来开发react-native应用。搭建react-native开发环境安装yarn和react-na...

Hwg 2019-08-21 15:12 评论0 收藏0
前端每周清单半年盘点之 React 与 ReactNative 篇

摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

Barry_Ng 2019-08-22 10:54 评论0 收藏0
【译】React Native 动画 API 入门实例

摘要：简而言之，它将对动画中变化的属性数值做插值运算并且刷新视图。注意我们所建立的的是的一个实例。最后我们使用，表示这个组件是可动画组件。一直不停动动画序列的方法可以传一个回调函数，在动画全部执行完时触发。翻译自 React-native Animated API Basic Example 翻译过程中有删改简介本文是探索 react-native 中实现的的 Animated AP...

qianfeng 2019-08-19 17:54 评论0 收藏0
React Native 简介：用 JavaScript 搭建 iOS 应用 (1)

摘要：利用来搭建代码。虽然这不是安装的唯一方式，但我发现，是非常好用的包管理器。终端窗口打开后，会启动，并由服务器处理以上请求。面对这种情况时，需要关闭终端窗口，停止在上的应用，并重新运行。使用设定应用的用户界面。命名这两个文件为和。【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，...

xiaoqibTn 2019-08-21 10:37 评论0 收藏0