Компоненты/Радиальная схема

Радиальная схема

Pro
28 сентября 2026

Схема с центральным узлом и сервисами по кругу, где при касании оживают пунктирные связи; на вебе — наведением.

Установка

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

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

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

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

Файлы

index.tsx
НазадРадарный лучДалееЗаставка

Центральный узел окружён сервисами, соединёнными с ним пунктирными линиями. При появлении узлы по очереди выпрыгивают на свои места на пружинах, а линии проявляются вслед за ними.

Пока палец лежит на схеме (в вебе — пока над ней курсор), пунктир бежит к центру, линии и подписи становятся контрастнее, а узлы и центр слегка увеличиваются. Схема сама уменьшается, если контейнер уже её размера. При «Уменьшении движения» всё показывается сразу и пунктир не движется. Работает на iOS, Android и в вебе.

Вручную

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

npm install react-native-reanimated react-native-svg
pnpm add react-native-reanimated react-native-svg
yarn add react-native-reanimated react-native-svg
bun add react-native-reanimated react-native-svg

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

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

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

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

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

Иконки узлов — функции, которые получают цвет и возвращают любой элемент, например иконку из react-native-svg.

Пропсы

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

Тип readonly RadialHubNode[]

center?

Тип RadialHubIcon

centerLabel?

Тип string

radius?

Тип number

hubSize?

Тип number

hoverScale?

Тип number

startAngle?

Тип number

style?

Тип StyleProp<ViewStyle>