Компоненты/Циферблат

Циферблат

Pro
28 сентября 2026

Циферблат в корпусе Apple Watch Ultra 2: цифровой с перетекающими сегментами или стрелочный с живыми стрелками

Установка

import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";

Установка через CLIPro

Команда станет доступна после оформления Pro.

Оформить ProВойти

Файлы

index.tsx
НазадВход с кошелькомДалееСтрелочные часы

Часы нарисованы внутри корпуса Apple Watch Ultra 2: рамка сделана на React Native SVG, а экран точно совпадает с вырезом дисплея и масштабируется вместе с корпусом от одного size. Проп face переключает два циферблата — цифровой с перетекающими сегментами и кольцом секунд или стрелочный с часовой, минутной и плавной секундной стрелкой, датой, шагами и зарядом. frame={false} возвращает прежний корпус без рамки. Живое время обновляется раз в секунду таймером на JS, а сегменты, двоеточие, кольцо и стрелки анимируются на UI-потоке. Передайте time, чтобы заморозить или вести часы вручную — тогда таймер не запускается. Корпус, стрелки и кольцо нарисованы через View и React Native SVG, поэтому одинаково работают на iOS, Android и в вебе.

Вручную

Поставьте зависимости:

npm install expo-status-bar react-native-reanimated react-native-svg
pnpm add expo-status-bar react-native-reanimated react-native-svg
yarn add expo-status-bar react-native-reanimated react-native-svg
bun add expo-status-bar react-native-reanimated react-native-svg

Скопируйте эти файлы в src/shared/components/organisms/watch-face/:

index.tsx
import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface WatchFaceProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function WatchFace({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: WatchFaceProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Код доступен по подпискеPro

Исходник «Циферблат» открывается с подпиской Pro. Уже оформили? Войдите в аккаунт.

Оформить ProВойти

Проверьте алиас путей. Импорты в коде выше записаны так, как их пишет astra-rn add: @/shared/components, @/shared/utils и @/shared/hooks. Нужен алиас "@/*": ["./src/*"] в tsconfig.json — или поправьте импорты под свои пути.

Использование

usage.tsx
import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface WatchFaceProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function WatchFace({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: WatchFaceProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Код доступен по подпискеPro

Исходник «Циферблат» открывается с подпиской Pro. Уже оформили? Войдите в аккаунт.

Оформить ProВойти

Пропсы

Пропс
Описание
time?

Тип Date

face?

Тип WatchFaceKind

frame?

Тип boolean

format?

Тип WatchFaceFormat

accent?

Тип string

showSeconds?

Тип boolean

theme?

Тип WatchFaceTheme

size?

Тип number

battery?

Тип number

steps?

Тип number

style?

Тип StyleProp<ViewStyle>