reacticx

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Reacticx Component Library

Reacticx 组件库

Headless, animation-focused React Native component library with 90+ production-ready components.

Docs: https://www.reacticx.com/docs | GitHub: https://github.com/rit3zh/reacticx

一款无UI外壳、专注于动画效果的React Native组件库，包含90+生产级可用组件。

文档： https://www.reacticx.com/docs | GitHub： https://github.com/rit3zh/reacticx

Setup

安装配置

bash

undefined

bash

undefined

Install core dependencies

npm install react-native-reanimated react-native-gesture-handler react-native-svg
expo-haptics expo-blur expo-symbols @expo/vector-icons @shopify/react-native-skia

Initialize config (optional, for CLI)

npx reacticx init

Add components

npx reacticx add <component-name> npx reacticx add <component> --dir <path> --overwrite npx reacticx list npx reacticx list -c <category>

undefined

npx reacticx add <component-name> npx reacticx add <component> --dir <path> --overwrite npx reacticx list npx reacticx list -c <category>

undefined

Component Categories

组件分类

Shaders (8) - GPU-accelerated visual effects

着色器组件（8个）- GPU加速的视觉效果

Read references/shaders.md when working with shader components.

Component	Install Name
Aurora	`aurora`
Chroma Ring	`chroma-ring`
Energy Orb	`energy-orb`
Siri Orb	`siri-orb`
Mesh Gradient	`mesh-gradient`
Grainy Gradient	`grainy-gradient`
Skia Ripple	`skia-ripple`
Wave Scrawler	`wave-scrawler`

使用着色器组件时，请参考references/shaders.md。

组件名称	安装名称
Aurora	`aurora`
Chroma Ring	`chroma-ring`
Energy Orb	`energy-orb`
Siri Orb	`siri-orb`
Mesh Gradient	`mesh-gradient`
Grainy Gradient	`grainy-gradient`
Skia Ripple	`skia-ripple`
Wave Scrawler	`wave-scrawler`

Texts (6) - Animated typography

文本动画组件（6个）- 带动画的排版效果

Read references/texts.md when working with text animation components.

Component	Install Name
Animated Text	`animated-text`
Dynamic Text	`dynamic-text`
Fade Text	`fade-text`
Gooey Text	`gooey-text`
Curved Marquee	`curved-marquee`
Staggered Text	`staggered-text`

使用文本动画组件时，请参考references/texts.md。

组件名称	安装名称
Animated Text	`animated-text`
Dynamic Text	`dynamic-text`
Fade Text	`fade-text`
Gooey Text	`gooey-text`
Curved Marquee	`curved-marquee`
Staggered Text	`staggered-text`

Micro Interactions (9) - Interactive feedback elements

微交互组件（9个）- 交互式反馈元素

Read references/micro-interactions.md when working with micro interaction components.

Component	Install Name
Animated Scroll Progress	`animated-scroll-progress`
Animated Theme Toggle	`animated-theme-toggle`
Animated Countdown	`countdown`
Elastic Slider	`elastic-slider`
Flexi Button	`flexi-button`
Gooey Switch	`gooey-switch`
Hamburger	`hamburger`
Spin Button	`spin-button`
Stacked Chips	`stacked-chips`

使用微交互组件时，请参考references/micro-interactions.md。

组件名称	安装名称
Animated Scroll Progress	`animated-scroll-progress`
Animated Theme Toggle	`animated-theme-toggle`
Animated Countdown	`countdown`
Elastic Slider	`elastic-slider`
Flexi Button	`flexi-button`
Gooey Switch	`gooey-switch`
Hamburger	`hamburger`
Spin Button	`spin-button`
Stacked Chips	`stacked-chips`

Carousels & Scrollables (13)

轮播与滚动组件（13个）

Read references/components-carousels.md when working with carousel or scrollable components.

Component	Install Name
Blur Carousel	`blur-carousel`
Cinematic Carousel	`cinematic-carousel`
Circular Carousel	`circular-carousel`
Circular List	`circular-list`
Material Carousel	`material-carousel`
Parallax Carousel	`parallax-carousel`
Rotate Carousel	`rotate-carousel`
Scale Carousel	`scale-carousel`
Tilt Carousel	`tilt-carousel`
Vertical Flow Carousel	`vertical-flow-carousel`
Vertical Page Carousel	`vertical-page-carousel`
Marquee	`marquee`
Matched Geometry	`matched-geometry`

使用轮播或滚动组件时，请参考references/components-carousels.md。

组件名称	安装名称
Blur Carousel	`blur-carousel`
Cinematic Carousel	`cinematic-carousel`
Circular Carousel	`circular-carousel`
Circular List	`circular-list`
Material Carousel	`material-carousel`
Parallax Carousel	`parallax-carousel`
Rotate Carousel	`rotate-carousel`
Scale Carousel	`scale-carousel`
Tilt Carousel	`tilt-carousel`
Vertical Flow Carousel	`vertical-flow-carousel`
Vertical Page Carousel	`vertical-page-carousel`
Marquee	`marquee`
Matched Geometry	`matched-geometry`

Navigation & Layout (13)

导航与布局组件（13个）

Read references/components-navigation.md when working with navigation, tabs, sheets, or menu components.

Component	Install Name
Accordion	`accordion`
Bottom Sheet	`bottom-sheet`
Bottom Sheet Stack	`bottom-sheet-stack`
Curved Bottom Tabs	`curved-bottom-tabs`
Dialog	`dialog`
Disclosure Group	`disclosure-group`
Dropdown	`dropdown`
Dynamic Island	`dynamic-island`
Morphing Tab Bar	`morphing-tabbar`
Segmented Control	`segmented-control`
Split View	`split-view`
Stack Aware Tabs	`stack-aware-tabs`
Tabs	`tabs`

使用导航、标签页、弹窗或菜单组件时，请参考references/components-navigation.md。

组件名称	安装名称
Accordion	`accordion`
Bottom Sheet	`bottom-sheet`
Bottom Sheet Stack	`bottom-sheet-stack`
Curved Bottom Tabs	`curved-bottom-tabs`
Dialog	`dialog`
Disclosure Group	`disclosure-group`
Dropdown	`dropdown`
Dynamic Island	`dynamic-island`
Morphing Tab Bar	`morphing-tabbar`
Segmented Control	`segmented-control`
Split View	`split-view`
Stack Aware Tabs	`stack-aware-tabs`
Tabs	`tabs`

Inputs & Controls (13)

输入与控制组件（13个）

Read references/components-inputs.md when working with buttons, inputs, pickers, or toggle components.

Component	Install Name
Animated Input Bar	`animated-input-bar`
Button	`button`
CheckBox	`check-box`
Flip Card	`flip-card`
OTP Input	`otp-input`
Picker	`picker`
Ruler	`ruler`
Scrollable Search	`scrollable-search`
Search Bar	`search-bar`
Seekbar	`seekbar`
Stepper	`stepper`
Switch	`switch`
Theme Switch	`theme-switch`

使用按钮、输入框、选择器或开关组件时，请参考references/components-inputs.md。

组件名称	安装名称
Animated Input Bar	`animated-input-bar`
Button	`button`
CheckBox	`check-box`
Flip Card	`flip-card`
OTP Input	`otp-input`
Picker	`picker`
Ruler	`ruler`
Scrollable Search	`scrollable-search`
Search Bar	`search-bar`
Seekbar	`seekbar`
Stepper	`stepper`
Switch	`switch`
Theme Switch	`theme-switch`

Loaders (6)

加载器组件（6个）

Read references/display-loaders.md when working with loading indicators.

Component	Install Name
Circle Loader	`circle-loader`
Circular Loader	`circular-loader`
Orbitdot Loader	`orbiting-dots`
Pulsing Loader	`pulsing-dots`
Rotating Square	`rotating-square`
Spinner Arc	`spinner-arc`

使用加载指示器时，请参考references/display-loaders.md。

组件名称	安装名称
Circle Loader	`circle-loader`
Circular Loader	`circular-loader`
Orbitdot Loader	`orbiting-dots`
Pulsing Loader	`pulsing-dots`
Rotating Square	`rotating-square`
Spinner Arc	`spinner-arc`

Progress & Transitions (5)

进度与过渡组件（5个）

Read references/display-progress.md when working with progress indicators or transition effects.

Component	Install Name
Circular Progress	`circular-progress`
Progress	`progress`
Rolling Counter	`rolling-counter`
Shimmer	`shimmer`
Shimmer Wave Text	`shimmer-wave`

使用进度指示器或过渡效果组件时，请参考references/display-progress.md。

组件名称	安装名称
Circular Progress	`circular-progress`
Progress	`progress`
Rolling Counter	`rolling-counter`
Shimmer	`shimmer`
Shimmer Wave Text	`shimmer-wave`

Content & Display (10)

内容与展示组件（10个）

Read references/display-content.md when working with avatars, badges, headers, toast, or display components.

Component	Install Name
Animated Chip Group	`animated-chip`
Animated Header ScrollView	`animated-header-scrollview`
Animated Masked Text	`animated-masked-text`
Avatar / Avatar Group	`avatar` / `avatar-group`
Badge	`badge`
Empty State	`empty-state`
QR Code	`qr-code`
Title	`title`
Toast	`toast`

使用头像、徽章、头部导航、提示框或展示类组件时，请参考references/display-content.md。

组件名称	安装名称
Animated Chip Group	`animated-chip`
Animated Header ScrollView	`animated-header-scrollview`
Animated Masked Text	`animated-masked-text`
Avatar / Avatar Group	`avatar` / `avatar-group`
Badge	`badge`
Empty State	`empty-state`
QR Code	`qr-code`
Title	`title`
Toast	`toast`

Effects & Visuals (7)

特效与视觉组件（7个）

Read references/display-effects.md when working with glow, ripple, cards, or visual effect components.

Component	Install Name
Glow	`glow`
Infinite Menu	`infinite-menu`
Lanyard	`lanyard`
Pagination	`pagination`
Radial Intro	`radial-intro`
Ripple	`ripple`
Stack Cards	`stack-cards`

使用发光、涟漪、卡片或视觉效果组件时，请参考references/display-effects.md。

组件名称	安装名称
Glow	`glow`
Infinite Menu	`infinite-menu`
Lanyard	`lanyard`
Pagination	`pagination`
Radial Intro	`radial-intro`
Ripple	`ripple`
Stack Cards	`stack-cards`

Common Dependencies

通用依赖

Package	Used By
`react-native-reanimated`	Nearly all components
`react-native-gesture-handler`	Carousels, sliders, switches, ripple
`@shopify/react-native-skia`	Shaders, gooey effects, theme switch
`react-native-svg`	Loaders, glow, curved marquee
`expo-blur`	Text effects, carousels, headers
`expo-haptics`	Accordion, pagination, pickers
`react-native-worklets`	Many animation-heavy components

依赖包	使用组件范围
`react-native-reanimated`	几乎所有组件
`react-native-gesture-handler`	轮播、滑块、开关、涟漪组件
`@shopify/react-native-skia`	着色器、粘性效果、主题开关
`react-native-svg`	加载器、发光、弧形跑马灯
`expo-blur`	文本效果、轮播、头部导航
`expo-haptics`	折叠面板、分页、选择器
`react-native-worklets`	许多重动画组件

Key Notes

关键注意事项

Wrap with
```
GestureHandlerRootView
```
when using gesture-based components
Configure
```
react-native-reanimated/plugin
```
in babel config
Skia components require native module installation
All animations target 60fps via Reanimated's UI thread
Some blur effects (
```
expo-blur
```
) work best on iOS

Import paths follow

@/components/{layer}/{name}

where layer is

base

molecules

organisms

, or

templates

使用基于手势的组件时，需要用
```
GestureHandlerRootView
```
进行包裹
在babel配置中添加
```
react-native-reanimated/plugin
```
插件
Skia组件需要安装原生模块
所有动画通过Reanimated的UI线程实现，目标帧率60fps
部分模糊效果（
```
expo-blur
```
）在iOS上表现最佳

导入路径遵循

@/components/{layer}/{name}

格式，其中layer为

base

、

molecules

、

organisms

或

templates