Компоненты/Строка по дуге

Строка по дуге

8 февраля 2026

Бегущая строка, плавно едущая по изогнутому SVG-пути

Установка

npx astra-rn add curved-marquee
pnpm dlx astra-rn add curved-marquee
yarn dlx astra-rn add curved-marquee
bunx --bun astra-rn add curved-marquee

Файлы

index.tsx
НазадТекст по кругуДалееТекст Dia

Вручную

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

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/curved-marquee/:

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

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

import { CurvedMarquee } from "@/shared/components/organisms/curved-marquee";
import React from "react";
import { StyleSheet, View } from "react-native";
import { Showcase, useCustomize } from "~/showcase";

const CUSTOMIZE = [
  { key: "text", label: "Текст", type: "text", default: "⋆ ✦ ⋆ ASTRA", maxLength: 40 },
  { key: "direction", label: "Направление", type: "select", options: [{ value: "left", label: "Влево" }, { value: "right", label: "Вправо" }], default: "left" },
  { key: "speed", label: "Скорость", type: "slider", min: 50, max: 2000, step: 10, default: 500 },
  { key: "curve", label: "Изгиб", type: "slider", min: -1000, max: 1000, step: 10, default: -500 },
  { key: "fontSize", label: "Размер шрифта", type: "slider", min: 30, max: 200, step: 1, unit: "px", default: 100 },
  { key: "color", label: "Цвет текста", type: "color", default: "#ffffff" },
  { key: "background", label: "Фон", type: "color", default: "#000000" },
] as const;

export default function CurvedMarqueeScreen() {
  const custom = useCustomize(CUSTOMIZE);
  return (
    <Showcase>
      <View style={[styles.container, { backgroundColor: custom.background }]}></View>
      <CurvedMarquee
        direction={custom.direction as "left" | "right"}
        text={custom.text}
        speed={custom.speed}
        curve={custom.curve}
        fontSize={custom.fontSize}
        textColor={custom.color}
      />
    </Showcase>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    justifyContent: "center",
    alignItems: "center",
  },
});

Пропсы

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

Тип string

speed?

Тип number

curve?

Тип number

direction?

Тип Direction | TextDirection

textColor?

Тип string

fontSize?

Тип number

copies?

Тип number

style?

Тип StyleProp<Required<ViewStyle>>