如何在React Native中构建翻转计时器

by Pritish Vaidya

通过Pritish Vaidya

如何在React Native中构建翻转计时器 (How to build a flip timer in React Native)

介绍 (Introduction)

A Flip Timer is a digital time keeping device with the time indicated by numbers that are sequentially revealed by a split-flap display.

翻转计时器是一种数字计时装置，其时间由数字指示，并由分瓣显示顺序显示。

This article will demonstrate the building of a Flip Timer in React Native using its exposed APIs and no additional dependencies.

本文将演示使用其公开的API在React Native中构建翻转计时器 ，而无需其他依赖项。

要克服的挑战 (Challenges to overcome)

• Implement transform-origin property using your College Math Course matrices techniques since it is not supported in React Native. Rotation around the centered origin (by default) is easy, but we need to translate origin and rotate around the edges.

  由于您的React Native不支持使用大学数学课程矩阵技术实现transform-origin属性。 绕中心原点旋转(默认情况下)很容易，但是我们需要平移原点并绕边旋转。

• Implementation of Flip Number component.
  翻转号码组件的实现。

• Overcome overflow: hidden issue in android since it doesn’t work with absolute positioned elements.

  克服overflow: hidden Android中的overflow: hidden问题，因为它不适用于绝对定位的元素。

内容 (Contents)

1. Implement Flip Number Component

   实施翻转编号组件

2. Implement FoldView

   实施FoldView

• Basic Layout
  基本布局
• Overcoming the Challenge
  克服挑战
• Adding the Transformations
  添加转换
• Adding the Animations
  添加动画

3. Update Timer Component

3. 更新计时器组件

4. Final Result

4. 最终结果

5. Links

5. 链接

实施翻转编号组件 (Implement Flip Number Component)

基本布局 (Basic Layout)

The Basic Layout consists of two cards — upper and lower joined together so that the view looks like a Flip Timer.

基本版式由两张卡片组成–上下卡合在一起，因此视图看起来像一个翻转计时器。

Number Card

号码卡

It is a basic layout consisting of a wrapper and two cards — lower, upper.

这是一个基本布局，包括包装纸和两张纸牌- 下部 ， 上部。

Note: Lower Card has the previous number added to it. Its use will be revealed once we reach the FoldView implementation.

注意 ：下卡已添加了先前的号码。 一旦达到FoldView实现，就会显示其用法。

Card

卡

The wrapper of the card has overflow: hidden, and we’re translating its items (number) based on the type of the card (upper or lower).

卡的包装纸已overflow: hidden ，我们正在根据卡的类型(上或下)转换其项目(编号)。

实施FoldView (Implement FoldView)

基本布局 (Basic Layout)

To build FoldView we need two FlipCards similar to NumberCards but with absolute positioning so that they are above the NumberCards when flip animations are applied.

打造FoldView我们需要类似NumberCards但绝对定位两个FlipCards使他们的NumberCards以上时，应用翻转动画。

Number Card

号码卡

Adding FlipCard component to the NumberCard component.

将FlipCard组件添加到NumberCard组件。

Flip Card

目录卡片

The FlipCard component is an animated wrapper with absolute positioning used while applying flip animation.

FlipCard组件是一个动画包装器，在应用翻转动画时使用了绝对定位。

Challenge (Part 2 and Part 3): overflow: hidden with absolute positioning has major issues in android. Using this StackOverflow post, it can be solved by using an overflow container inside the absolute positioned element.

挑战(第2部分和第3部分) ： overflow: hidden绝对定位overflow: hidden在android中存在重大问题。 使用 这个StackOverflow帖子，可以通过在绝对定位的元素内使用一个溢出容器来解决。

最后结果 (Final Result)

克服挑战 (Overcoming the Challenge)

Now comes the hard part. We need to add fold the FlipCard component along the edges.

现在是困难的部分。 我们需要沿着边缘折叠FlipCard组件。

Since React Native doesn’t support transform-origin property, we need to find some other way to shift the rotation origin on the bottom edge.

由于React Native不支持transform-origin属性，我们需要找到其他方法来在底部边缘移动旋转原点。

Fortunately, there is one way to overcome this issue. According to this awesome article and reading the MDN docs for the transform-origin property, it can be implemented using matrices.

幸运的是，有一种方法可以解决此问题。 根据这篇很棒的文章并阅读MDN文档的transform-origin属性，可以使用矩阵来实现它。

Utils

实用程序

React Native exposes several matrix operations in the MatrixMath.js. The important ones that we require are

React Native在MatrixMath.js中公开了几个矩阵操作。 我们需要的重要是

• Identity Matrix: It returns a 4 * 4 identity matrix [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

  身份矩阵：返回一个4 * 4身份矩阵[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

• Multiply Matrix: This utility method generates output based on the multiplication of 4*4 matrices a and b supplied as input.

  乘法矩阵：此实用程序方法基于作为输入提供的4 * 4矩阵a和b的乘积生成输出。

• Rotate Matrix: It is a custom utility method that will take a 4*4 matrix and degree to which it will be rotated to then multiply it to the original matrix to return the generated result.

  旋转矩阵：这是一种自定义实用程序方法，它将采用4 * 4矩阵和旋转度，然后将其乘以原始矩阵以返回生成的结果。

• Perspective Matrix: This utility method will allow us to use the perspective style to React Native and then multiply to the original 4*4 matrix.

  透视矩阵：此实用程序方法将使我们能够使用透视样式来响应本机，然后乘以原始4 * 4矩阵。

• Translate Matrix: This utility method will translate the origin and modify the original 4*4 matrix

  转换矩阵：此实用程序方法将转换原点并修改原始的4 * 4矩阵

• Un-Translate Matrix: This utility method will un-translate the origin and modify the original 4*4 matrix

  取消平移矩阵：此实用程序方法将取消平移原点并修改原始4 * 4矩阵

添加转换 (Adding the Transformations)

deg is the degree to be rotated and y is the height of the component to which it will be translated.

deg是要旋转的度数， y是将要平移的组件的高度。

Challenge (Part 1): Combining the utils from the above, transform-origin is implemented successfully.

挑战(第1部分) ：结合以上的utils， transform-origin成功实现。

添加动画 (Adding the Animations)

更新计时器组件 (Update Timer Component)

添加时间利用率 (Add Time Util)

This util will increment the timer by one sec and adjust hours, minutes, seconds.

该实用程序将使计时器增加一秒，并调整小时，分钟，秒。

计时器组件 (Timer Component)

The timer component will call Time Util and update the component based on hours, minutes, seconds

计时器组件将调用Time Util并根据小时，分钟，秒更新组件

翻转编号组件 (Flip Number Component)

This component just splits the number into two parts based on their digit placement and calls NumberCard component .

该组件仅根据数字位置将数字分为两部分，并调用NumberCard组件。

最后结果 (Final Result)

链接 (Links)

I’ve published a package for it that contains more customizable properties.

我为此发布了一个程序包，其中包含更多可自定义的属性。

• npm : react-native-flip-timer

  npm： react-native-flip-timer

• GitHub: react-native-flip-timer

  GitHub： react-native-flip-timer

More of the cool stuff can be found on my StackOverflow and GitHub profiles.

在我的StackOverflow和GitHub上可以找到更多有趣的东西 个人资料。

Follow me on LinkedIn, Medium, Twitter for further update new articles.

在LinkedIn ， Medium和Twitter上关注我，以获取更多更新的新文章。

One clap, two claps, three claps, forty?

一拍，两拍，三拍，四十？

Originally published at blog.pritishvaidya.com on March 2, 2019.

最初于2019年3月2日发布在blog.pritishvaidya.com上。

翻译自: https://www.freecodecamp.org/news/how-to-build-a-flip-timer-in-react-native-e208e54baf58/