In this article, we are going to look at how to draw a nice-looking analog clock face by using react-native, react-native-svg , and styled-components. The clock is going to tell time, tick, and have support for dark and light themes.

在本文中，我们将研究如何通过使用react-native, react-native-svg和styled-components绘制漂亮的模拟时钟面。 时钟会告诉时间，滴答声并支持深色和浅色主题。

This is based on the work I’ve done on Nyxo, where we should a clock face as the base for showing your sleep data. I’ve been getting some questions on how to create something similar, which is why I wrote this guide to create them yourselves. If you just want to get your hands on the code, it’s here.

这是基于我在Nyxo上所做的工作，我们应该以钟面为基础来显示您的睡眠数据。 我一直在问如何创建类似的东西，这就是为什么我写本指南来自己创建它们的原因。 如果您只想使用代码，就在这里。

入门 (Getting started)

Let’s start by initing a new project. You could very well do this with Expo, but I prefer to use the ejected version of React Native. To do that we are going to use the react-native-cli and the TypeScript example project to get started:

让我们从启动一个新项目开始。 您可以通过Expo很好地做到这一点，但是我更喜欢使用React Native的弹出版本。 为此，我们将使用react-native-cli和TypeScript示例项目开始：

$ npx react-native init HelloClock --template react-native-template-typescript

after that, let’s install the external packages and types we need:

之后，让我们安装所需的外部软件包和类型：

$ yarn add react-native-svg styled-components @types/styled-components

Then we need to navigate to ios folder and install required pods:

然后，我们需要导航到ios文件夹并安装所需的pod：

$ cd ios & pod install cd -

You can now run the project:

您现在可以运行该项目：

$ react-native run-ios

资料夹结构 (Folder structure)

I’m going to structure the project in the following way:

我将通过以下方式构建项目：

HelloClock├── index.js├── App.tsx├── components│  ├── Hand.tsx│ ├── ClockMarkings.tsx           │ └── Clock.tsx├── helpers          │ ├── geometry.ts│  ├── time.ts │ └── useInterval.ts

极坐标和笛卡尔坐标 (Polar and cartesian coordinates)

Let’s now look at how to convert time to coordinates on SVG. We can think of clock times in degrees, i.e., 12 am and 12 pm clock being the same as 0° and 6 pm and 6 am being 180°. We could, of course, use radians as well, but for me, at least degrees feel more familiar. A coordinate system which uses angle and reference point to determine a point on a plane is a Polar coordinate system.

现在让我们看一下如何将时间转换为SVG上的坐标。 我们可以想到以度为单位的时钟时间，即12 am和12 pm时钟与0°和6 pm和6 am是180°相同。 当然，我们也可以使用弧度，但是对我来说，至少度会更熟悉。 使用角度和参考点确定平面上的点的坐标系是极坐标系。

Converting time to Polar coordinate systems is relatively simple. Let’s say we, for example, want to determine the angle of the minute hand on a clock in degrees when we know the number of minutes to be 30. If one full revolution is 60 minutes and one complete revolution is 360°, then dividing 30 minutes with 60 and multiplying that with 360 gives the same number of minutes in degrees, which is 180. Let’s implement that with code into the time file:

将时间转换为极坐标系相对简单。 例如，假设我们知道分钟数为30，则想确定分针在时钟上的角度，以度为单位。如果一整圈为60分钟，一整圈为360°，则除以30分钟与60乘以360与分钟相乘得到的分钟数相同，即180。让我们在时间文件中实现该代码：

export function polarToCartesian( centerX: number, centerY: number, radius: number, angleInDegrees: number) { const angleInRadians = ((angleInDegrees — 90) * Math.PI) / 180.0; return { x: centerX + radius * Math.cos(angleInRadians), y: centerY + radius * Math.sin(angleInRadians), };}

时钟组件 (The clock component)

Let’s start the UI stuff by cleaning up the App.tsx file so that it only has a StatusBar, SafeAreView the <Clock>-component:

让我们通过清理App.tsx文件开始UI内容，以便它仅具有StatusBar ， SafeAreView <Clock> SafeAreView ：

import React from “react”;import Clock from “./components/Clock”;import styled from “styled-components/native”; const App = () => { return ( <> <StatusBar barStyle=’light-content’ /> <SafeAreaView> <ScrollView centerContent={true} contentInsetAdjustmentBehavior=’automatic’> <Clock /> </ScrollView> </SafeAreaView> </> );}; const ScrollView = styled.ScrollView` flex: 1; background-color: black;`; const SafeAreaView = styled.SafeAreaView` background-color: black; flex: 1;`; const StatusBar = styled.StatusBar.attrs(() => ({ barStyle: “light-content”,}))``; export default App;

Let’s not save the file just yet, but instead, start working on the Clock, ClockMarks, and Hand components. Import Dimensions from react-native and Svg-component from react-native-svg and make the Clock return a square SVG with the side of the squares being the same as the width of the mobile phone's screen by using the Dimensions helper:

现在，我们不保存文件，而是开始处理Clock ， ClockMarks和Hand组件。 进口Dimensions从react-native和Svg -component从react-native-svg ，使Clock恢复方形SVG带有方块使用尺寸助手是一样的手机的屏幕宽度的一面：

import React from “react”;import Svg from “react-native-svg”;import { Dimensions } from “react-native”;const { width } = Dimensions.get(“window”); const Clock = () => { return <Svg height={width} width={width}></Svg>;}; export default Clock;

Now when we save, nothing should appear on the screen. This is because SVG itself has no visible parts. Let’s continue by adding the ClockMarks to communicate the minutes and hours. First, let’s define how many ticks we want. Let’s write those values above the Clock component:

现在，当我们保存时，屏幕上将不会出现任何内容。 这是因为SVG本身没有可见的部分。 让我们继续添加ClockMarks以交流分钟和小时。 首先，让我们定义我们想要多少个报价。 让我们在Clock组件上方编写这些值：

import React from “react”;import Svg from “react-native-svg”;import { Dimensions } from “react-native”;const { width } = Dimensions.get(“window”); const { width } = Dimensions.get(“window”);const diameter = width — 40;const center = width / 2;const radius = diameter / 2;const hourStickCount = 12;const minuteStickCount = 12 * 6; const Clock = () => { return <Svg height={width} width={width}></Svg>;}; export default Clock;

We don’t want the clock to take the whole space of the screen, so we define the diameter to be the width of the screen minus 40. Then we want the clock to be in the center of the screen, so we divide the width of the screen with 2, and last we also need radius, which is, of course, half of the diameter.

我们不希望时钟占据屏幕的整个空间，因此我们将直径定义为屏幕的宽度减去40。然后我们希望时钟位于屏幕的中心，因此我们将宽度除以的屏幕上有2，最后我们还需要半径，这当然是直径的一半。

For hours we want 12. In analog clocks, there are usually five divisions between every hour tick, and that’ How we are going to do it as well. However because because because we will keep the spacing between minute ticks consistent, it means that one of the minutes marking is going to overlap with every hour, we are going to add one extra tick and then multiply that by the number of hours, which equals to 72 minute markings

对于小时，我们需要12。在模拟时钟中，通常每个小时的滴答之间有五个分度，这就是我们要做的方式。 但是，因为因为我们将使分钟刻度之间的间隔保持一致，所以这意味着分钟标记之一将与每小时重叠，因此我们将添加一个额外的刻度，然后将其乘以小时数，即等于至72分钟的标记

创建时钟分区(Create the Clock Divisions)

Not let’s put the values to use by creating the clock face values. Create a new file ClockMarkins.tsx. The ClockMarkins.tsx is going to contain the clock tics for both hours and minutes. The component is going to accept props for radius, center point, minutes, and hours. Radius and center are going to be used to determine the arc on which the tics will be placed and hours and minutes are going to tell us how many tics we want.

我们不要通过创建钟面值来使用这些值。 创建一个新文件ClockMarkins.tsx 。 ClockMarkins.tsx 将包含小时和分钟的时钟信号。 该组件将接受半径，中心点，分钟和小时的道具。 半径和中心将用于确定放置抽查的弧线，小时和分钟将告诉我们需要多少抽查。

import React from “react”;import { G, Line, Text } from “react-native-svg”;import { polarToCartesian } from “../helpers/geometry”; type Props = { radius: number; center: number; minutes: number; hours: number;}; const ClockMarkings = (props: Props) => { const { radius, center, minutes, hours } = props; const minutesArray = new Array(minutes).fill(1); const hoursArray = new Array(hours).fill(1); const minuteSticks = minutesArray.map((minute, index) => { const start = polarToCartesian(center, center, radius, index * 5); const end = polarToCartesian(center, center, radius, index * 5); return ( <Line stroke=’white’ strokeWidth={2} strokeLinecap=’round’ key={index} x1={start.x} x2={end.x} y1={start.y} y2={end.y} /> ); }); const hourSticks = hoursArray.map((hour, index) => { const start = polarToCartesian(center, center, radius — 10, index * 30); const end = polarToCartesian(center, center, radius, index * 30); const time = polarToCartesian(center, center, radius — 35, index * 30); return ( <G key={index}> <Line stroke=’white’ strokeWidth={3} strokeLinecap=’round’ x1={start.x} x2={end.x} y1={start.y} y2={end.y} /> <Text textAnchor=’middle’ fontSize=’17' fontWeight=’bold’ fill=’white’ alignmentBaseline=’central’ x={time.x} y={time.y}> {index === 0 ? 12 : index} </Text> </G> ); }); return ( <G> {minuteSticks} {hourSticks} </G> );}; export default ClockTicks;

We use the hours and minutes variables to create arrays that match in length to the division count we want. Then we map those arrays to return Svg lines and make use of the polarToCartesian function we created earlier to the get correct position of the tics on the arc. I also added the Text tag so we can have nice numbers on the clockface. Because the array starts from zero, instead of using the index to render the number, in that case, it switches it with 12, so that our clock has number 12 on the top instead of zero.

我们使用hours和minutes变量创建长度与所需除法计数匹配的数组。 然后，我们映射这些数组以返回Svg线，并利用我们之前创建的polarToCartesian函数来获得polarToCartesian在圆弧上的正确位置。 我还添加了“文本”标签，因此我们可以在表盘上添加漂亮的数字。 因为数组从零开始，所以不使用索引来呈现数字，在这种情况下，它将其切换为12，因此我们的时钟顶部的数字为12，而不是零。

Now if we add the ClockMarkings component to the Clock component and pass the variables for the clock face from earlier, we get something that looks something like this:

现在，如果将ClockMarkings组件添加到Clock组件，并从较早的时候传递时钟面的变量，我们将得到如下所示的内容：

创建钟针(Creating the Clock Hands)

The clock is nothing without the hands so let’s make those next. Create a new component called Hand.tsx in the components folder with the following code:

没有指针，时钟就算不了什么，所以让我们下一步。 使用以下代码在components文件夹中创建一个名为Hand.tsx的新组件：

import React from “react”;import { Line } from “react-native-svg”;import { polarToCartesian } from “../helpers/geometry”; type Props = { center: number; radius: number; angle: number; strokeWidth: string; stroke: string;}; const Hand = (props: Props) => { const { center, radius, angle, stroke, strokeWidth } = props; const { x, y } = polarToCartesian(center, center, radius, angle); return ( <Line x1={center} y1={center} x2={x} y2={y} strokeWidth={strokeWidth} strokeLinecap=’round’ stroke={stroke} /> );}; export default Hand;

This component is a lot simpler than the Clock markings because it’s only a single SVG line. We use the function polarToCartesia from earlier and pass down the angle from Clock.tsx to this component, as well as the strokeWidth and stroke variables which we going to use to make the hands for seconds, minutes, and hours to differ from each other.

该组件比Clock标记简单得多，因为它只是一条SVG线。 我们从更早的时候开始使用函数polarToCartesia并从 Clock.tsx 这个组件，以及我们将用来使秒针，分钟和小时彼此不同的strokeWidth和stroke变量。

import React, { useState } from “react”;import Svg from “react-native-svg”;import { Dimensions } from “react-native”;import ClockMarkings from “./ClockMarkings”;import Hand from “./Hand”;import { useInterval } from “../helpers/hooks”;import { getTime } from “../helpers/time”; const { width } = Dimensions.get(“window”);const diameter = width — 40;const center = width / 2;const radius = diameter / 2;const hourStickCount = 12;const minuteStickCount = 12 * 6; const Clock = () => { let [time, setTime] = useState(getTime); useInterval(() => { setTime(getTime); }, 1000); return ( <Svg height={width} width={width}> <ClockMarkings minutes={minuteStickCount} hours={hourStickCount} radius={radius} center={center} /> <Hand angle={time.seconds} center={center} radius={radius} stroke=’red’ strokeWidth=’1' /> <Hand angle={time.minutes} center={center} radius={radius} stroke=’white’ strokeWidth=’5' /> <Hand angle={time.hours} center={center} radius={radius} stroke=’white’ strokeWidth=’7' /> </Svg> );}; export default Clock;

You could now use this component to make a clock look like something in the picture below. However, because our clock hands don’t accept time yet, you would need to calculate the correct angle for the time you want to display. So let’s continue by creating a couple of helper functions that will allow us to turn time values into coordinates for our clock.

现在，您可以使用此组件使时钟看起来像下面的图片。 但是，由于我们的时钟指针尚不接受时间，因此您需要为要显示的时间计算正确的角度。 因此，让我们继续创建一些辅助函数，这些函数将使我们可以将时间值转换为时钟的坐标。

滴答作响 (Making the Clock Tick)

In the helpers folder create a new file called time.ts with the following contents:

在helpers文件夹中，创建一个名为time.ts的新文件，其内容如下：

export const to12hClock = (hour: number): number => { return hour > 12 ? hour — 12 : hour;}; type TimeObject = { hours: number; minutes: number; seconds: number;}; export const getTime = (): TimeObject => { const date = new Date(); const hours = (to12hClock(date.getHours()) / 12) * 360; const minutes = (date.getMinutes() / 60) * 360; const seconds = (date.getSeconds() / 60) * 360; return { hours, minutes, seconds };};

Let’s go over what the functions do. The to12hClock function is just a small helper to convert 24 -hour clock to 12-clock when getting the hours with the getHours function of JavaScript Date. The getTime function is also quite straight forward. Each time the function is called it creates a new Date object and then uses the native time functions and simple mathematics to convert those to degrees.

让我们回顾一下函数的作用。 to12hClock函数只是在使用JavaScript Date的getHours函数获取小时数时将24小时制转换为12小时制的小帮手。 getTime函数也很简单。 每次调用该函数时，都会创建一个新的Date对象，然后使用本机时间函数和简单的数学方法将其转换为度。

Let’s also create a new useInterval hook, that we can then use to periodically create new time for our clock. Here’s the code for it:

我们还创建一个新的useInterval挂钩，然后可以使用该挂钩定期为时钟创建新时间。 这是它的代码：

import React, { useState, useEffect, useRef } from “react”; // From Dan Abramov https://overreacted.io/making-setinterval-declarative-with-react-hooks/export function useInterval(callback, delay) { const savedCallback = useRef(); // Remember the latest callback. useEffect(() => { savedCallback.current = callback; }, [callback]); // Set up the interval. useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]);}

Modify the clock component to use our new getTime function with the useInterval and useState hooks and we ourselves a clock that ticks!

修改时钟组件以使用带有useInterval和useState钩子的新getTime函数，我们自己就是一个滴答作响的时钟！

import React, { useState } from “react”;import Svg from “react-native-svg”;import { Dimensions } from “react-native”;import ClockMarkings from “./ClockMarkings”;import Hand from “./Hand”;import { useInterval } from “../helpers/hooks”;import { getTime } from “../helpers/time”; const { width } = Dimensions.get(“window”);const diameter = width — 40;const center = width / 2;const radius = diameter / 2;const hourStickCount = 12;const minuteStickCount = 12 * 6; const Clock = () => { let [time, setTime] = useState(getTime); useInterval(() => { setTime(getTime); }, 1000); return ( <Svg height={width} width={width}> <ClockMarkings minutes={minuteStickCount} hours={hourStickCount} radius={radius} center={center} /> <Hand angle={time.seconds} center={center} radius={radius} stroke=’red’ strokeWidth=’1' /> <Hand angle={time.minutes} center={center} radius={radius} stroke=’white’ strokeWidth=’5' /> <Hand angle={time.hours} center={center} radius={radius} stroke=’white’ strokeWidth=’7' /> </Svg> );}; export default Clock;

时钟主题 (Theming the Clock)

Supporting a dark mode is almost a must these days. So let’s stylize our clock a little and add a dark mode.

这些天几乎必须支持暗模式。 因此，让我们对时钟进行一些样式化并添加一个暗模式。

Let’s start by creating a themes.ts file in the root of the project and with the following contents:

首先，在项目的根目录中创建一个themes.ts文件，其内容如下：

import { DefaultTheme } from “styled-components/native”; declare module “styled-components” { export interface DefaultTheme { style: string; bgColor: string; primaryColor: string; secondaryColor: string; accentColor: string; }} export const lightTheme: DefaultTheme = { style: “light”, bgColor: “white”, primaryColor: “#333”, secondaryColor: “#555”, accentColor: “#4a5aef”,}; export const darkTheme: DefaultTheme = { style: “dark”, bgColor: “#111”, primaryColor: “#fff”, secondaryColor: “#CACACA”, accentColor: “#4aefd5”,};

I’m going to use four colors in this case. To get TypeScript support, I made a custom theme declaration.

在这种情况下，我将使用四种颜色。 为了获得TypeScript支持，我做了一个自定义主题声明。

Then we need to convert some of our existing components to use those theme variables instead of the previously set colors. This is what it should look like in the App.tsx

然后，我们需要转换一些现有组件以使用那些主题变量，而不是先前设置的颜色。 这就是App.tsx中的App.tsx

const ScrollView = styled.ScrollView` flex: 1; background-color: ${({ theme }) => theme.bgColor};`; const SafeAreaView = styled.SafeAreaView` background-color: ${({ theme }) => theme.bgColor}; flex: 1;`; const StatusBar = styled.StatusBar.attrs(({ theme }) => ({ barStyle: theme.style === “dark” ? “light-content” : “dark-content”,}))``;

Let’s also change the styling of the clock markings and the clock hands so that with the dark theme we change the stroke and fill colors in the following way:

我们还要更改时钟标记和时钟指针的样式，以便在深色主题下，通过以下方式更改笔划和填充颜色：

// ClockMarkings.ts const Minute = styled(Line).attrs(({ theme }) => ({ stroke: theme.secondaryColor,}))``; const HourLine = styled(Line).attrs(({ theme }) => ({ stroke: theme.secondaryColor,}))``; const HourNumber = styled(Text).attrs(({ theme }) => ({ fill: theme.primaryColor,}))``; // Clock.ts const Seconds = styled(Hand).attrs(({ theme }) => ({ stroke: theme.accentColor, strokeOpacity: “1”,}))``; const Minutes = styled(Hand).attrs(({ theme }) => ({ stroke: theme.primaryColor, strokeOpacity: “0.5”,}))``; const Hours = styled(Hand).attrs(({ theme }) => ({ stroke: theme.primaryColor, strokeOpacity: “0.8”,}))``;

You will need to change the props on the Hand component so that the stroke and strokeOpacity are passed down to the underlying SVG component.

您将需要更改Hand组件上的props，以便将stroke和strokeOpacity向下传递到基础SVG组件。

最终结果 (End Result)

Now you should have a ticking clock that respects the user’s preferred theme. If you wanted to improve this, you could animate the hand movements.

现在，您应该有一个滴答时钟，它尊重用户的首选主题。 如果您想改善这一点，可以对手部动作进行动画处理。