# @evlop/native-components 中文文档

规范地址：https://npmcn.com/package/%40evlop/native-components/

版本：1\.0\.302
npm 元数据更新时间：2026-10-29T19:42:48.827Z
中文译文更新时间：2026-11-14T02:14:51.141Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40evlop/native-components
原文对照：https://npmcn.com/package/%40evlop/native-components/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：427 kB，340 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18，lodash ^4\.17\.15，i18next ^21\.8\.9，polished ^4\.3\.1，query-string ^7\.1\.0，react-native ^0\.76\.1，styled-system ^5\.1\.5，@evlop/commons ^1\.0\.137，react-native-svg ^15\.15\.1，styled-components ^4\.4\.1，react-native-webview ^11\.0\.2，@notifee/react-native ^9\.1\.8，react-native-elements ^3\.1\.0，react-native-tab-view 4\.3\.2，react-native-fast-image ^8\.6\.3，react-native-vector-icons ^10\.0\.3，@react-navigation/elements ^2\.9\.3，react-native-drawer-layout ^4\.2\.2，react-native-haptic-feedback ^2\.3\.3，react-native-safe-area-context ^4\.3\.1
- 首次发布：2019-12-12T17:23:51.704Z
- 最新版本发布：2026-10-29T19:42:48.651Z
- 近 30 天下载量：2835（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：299（近 12 个月 63 个）

## 中文简介

一套有风格的系统集成的React Industrial组件,用于构建美丽,一致的UI. 这些组件被设计用于AI-动力代码生成工具.

## 安装

```sh
npm install @evlop/native-components
```

也可以使用：`pnpm add @evlop/native-components`、`yarn add @evlop/native-components`、`bun add @evlop/native-components`

## README

# 原生成分

一套有风格的系统集成的React Industrial组件,用于构建美丽,一致的UI. 这些组件被设计用于AI-动力代码生成工具.

## 安装

```bash
npm install @evlop/native-components
```

## 快速启动

```tsx
import { Box, Flexbox, Text, Icon, Button, Actionable, Image, ImageBackground, Swiper, triggerHapticFeedback } from 'types-for-ai';
```

* * *

## 组件使用大小写( U)

### 框图

一个风格 `View` 组件,用于支持布局、间隔、边框、颜色和定位.

```tsx
// Basic container
<Box padding={16} backgroundColor="white" borderRadius={8}>
  <Text>Content</Text>
</Box>

// Card with shadow effect
<Box 
  margin={16}
  padding={20}
  backgroundColor="white"
  borderRadius={12}
  borderWidth={1}
  borderColor="gray-200"
>
  <Text>Card Content</Text>
</Box>

// Absolute positioned overlay
<Box position="absolute" top={0} left={0} right={0} bottom={0} opacity={0.5} backgroundColor="black" />
```

**道具 :** 所有反应原生 `ViewProps` + 键 `flexbox`, (中文(简体) ), `border`, (中文(简体) ), `layout`, (中文(简体) ), `color`, (中文(简体) ), `background`, (中文(简体) ), `space`, (中文(简体) ), `opacity`, (中文(简体) ), `position`

* * *

### 缩写框

默认的弹性盒容器 `flexDirection: 'row'` 和差距支持.

```tsx
// Horizontal row with items
<Flexbox flexDirection="row" justifyContent="space-between" alignItems="center" gap={12}>
  <Icon icon="home" />
  <Text>Home</Text>
</Flexbox>

// Vertical stack
<Flexbox flexDirection="column" gap={8} padding={16}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</Flexbox>

// Grid-like layout
<Flexbox flexWrap="wrap" gap={16} rowGap={8} columnGap={12}>
  {items.map(item => <Box key={item.id} width="48%">{item.name}</Box>)}
</Flexbox>
```

**道具 :** 全体 `Box` 道具 + `gap`, (中文(简体) ), `rowGap`, (中文(简体) ), `columnGap`

* * *

### 页:1

一个有打字支持的有样式的文本组件,主题变体,以及模板渲染.

```tsx
// Basic text
<Text color="gray-900" fontSize={16}>Hello World</Text>

// Styled heading
<Text fontWeight="Bold" fontSize={24} color="primary">
  Welcome Back!
</Text>

// Using theme variants
<Text variant="heading">Heading Text</Text>
<Text variant="body">Body text content</Text>

// Font scaling (relative to base font size)
<Text fontScale={1.5}>Larger Text</Text>

// Dynamic template content (supports handlebars)
<Text content="Hello, {{user.name}}!" />
```

**道具 :** `color`, (中文(简体) ), `fontSize`, (中文(简体) ), `fontWeight`, (中文(简体) ), `fontScale`, (中文(简体) ), `textAlign`, (中文(简体) ), `variant`, (中文(简体) ), `content` + 标准 `TextProps`

* * *

### 图标

在 RTL 支持下显示来自各种图标库的图标.

```tsx
// Basic icon
<Icon icon="home" size={24} color="primary" />

// Different sizes
<Icon icon="settings" size={32} color="gray-600" />

// With press handler
<Icon icon="close" onPress={() => navigation.goBack()} />

// RTL flip support (for directional icons like arrows)
<Icon icon="arrow-right" flipOnRTL />

// Supported icon libraries:
// - material-icons
// - material-community-icons
// - font-awesome-6
// - ionicons
// - simple-line-icons
// - evilicons
// - octicons
// - svg (custom SVG URLs)
```

**道具 :** `icon`, (中文(简体) ), `size`, (中文(简体) ), `color`, (中文(简体) ), `flipOnRTL`, (中文(简体) ), `onPress`

* * *

### 按钮

一个有多个变体、大小、装入状态和图标支持的样式按钮.

```tsx
// Filled button (default)
<Button label="Get Started" color="primary" action={myAction} />

// Outlined button
<Button label="Learn More" variant="outlined" color="secondary" />

// Ghost button (no background)
<Button label="Cancel" variant="ghost" color="gray-600" />

// Dim outlined (subtle border)
<Button label="Optional" variant="dim-outlined" color="primary" />

// Dim filled outlined (subtle background + border)
<Button label="Soft CTA" variant="dim-filled-outlined" color="primary" />

// With icon
<Button label="Add Item" icon="plus" iconPosition="left" color="primary" />
<Button label="Next" icon="arrow-right" iconPosition="right" />

// Different sizes
<Button label="Small" size="sm" />
<Button label="Medium" size="md" />
<Button label="Large" size="lg" />
<Button label="Extra Large" size="xl" />
<Button label="2X Large" size="2xl" />

// Loading state
<Button label="Submitting..." loading={true} />

// Disabled state
<Button label="Unavailable" disabled={true} />
```

**备选案文:** `filled`, (中文(简体) ), `outlined`, (中文(简体) ), `dim-outlined`, (中文(简体) ), `dim-filled-outlined`, (中文(简体) ), `ghost`  
**大小 :** `sm`, (中文(简体) ), `md`, (中文(简体) ), `lg`, (中文(简体) ), `xl`, (中文(简体) ), `2xl`  
**道具 :** `label`, (中文(简体) ), `variant`, (中文(简体) ), `size`, (中文(简体) ), `color`, (中文(简体) ), `textColor`, (中文(简体) ), `icon`, (中文(简体) ), `iconPosition`, (中文(简体) ), `loading`, (中文(简体) ), `disabled`, (中文(简体) ), `action`

* * *

### 可操作

带有新闻效果和随机反馈支持的可压缩包装.

```tsx
// Basic actionable area
<Actionable action={navigateAction}>
  <Text>Tap me</Text>
</Actionable>

// With scale press effect
<Actionable action={myAction} pressEffect="scale">
  <Box padding={16}><Text>Press to scale</Text></Box>
</Actionable>

// With opacity press effect
<Actionable pressEffect="opacity" action={myAction}>
  <Image src="card-image.jpg" />
</Actionable>

// With haptic feedback
<Actionable action={myAction} hapticFeedback="impactMedium">
  <Text>Haptic button</Text>
</Actionable>

// Combined effects
<Actionable 
  action={addToCartAction}
  pressEffect="bounce"
  hapticFeedback="impactLight"
>
  <Box backgroundColor="primary" padding={12} borderRadius={8}>
    <Text color="white">Add to Cart</Text>
  </Box>
</Actionable>
```

**按下效果 :**

-   `none` - 没有视觉效果
-   `opacity` - 媒体的花样
-   `scale` - 略微擦出新闻
-   `scale-opacity` - 将规模和不透明结合起来
-   `bounce` - 弹簧效应
-   `tilt-left` 编号 : `tilt-right` - 报纸上的倾斜
-   `pulse` - 推动动画
-   `jelly` - 弹性果冻效应
-   `rubberBand` - 橡胶筋拉伸效应
-   `glow` - 亮亮效果
-   `press-in` - 三维压入效应
-   `swing` - 旋转旋转

**波动类型 :** `impactLight`, (中文(简体) ), `impactMedium`, (中文(简体) ), `impactHeavy`, (中文(简体) ), `rigid`, (中文(简体) ), `soft`, (中文(简体) ), `notificationSuccess`, (中文(简体) ), `notificationWarning`, (中文(简体) ), `notificationError`

* * *

### 图像

一个有预设大小和模板 URL 支持的样式图像组件.

```tsx
// Basic image
<Image src="https://example.com/image.jpg" />

// Using preset sizes
<Image src="product.jpg" size="md" />
<Image src="avatar.jpg" size="xs" />
<Image src="banner.jpg" size="fluid" />

// Custom dimensions
<Image src="photo.jpg" width={200} height={150} />

// With aspect ratio
<Image src="video-thumb.jpg" aspectRatio={16/9} />

// Resize modes
<Image src="cover.jpg" resizeMode="cover" />
<Image src="contain.jpg" resizeMode="contain" />

// With placeholder fallback
<Image src="{{product.image}}" placeholder="default-product.jpg" />

// Dynamic URL with template
<Image src="{{baseUrl}}/images/{{product.id}}.jpg" />
```

**预设大小 :** `3xs` (15个px), `2xs` (35个px), `xs` (50个px), `sm` (75页x), `md` (150页x), `lg` (275px), (中文(简体) ), `xl` (300平方厘米), `2xl` (400平方厘米), `3xl` (480页x), `fluid` (100%)

**道具 :** `src`, (中文(简体) ), `placeholder`, (中文(简体) ), `size`, (中文(简体) ), `width`, (中文(简体) ), `height`, (中文(简体) ), `aspectRatio`, (中文(简体) ), `resizeMode`

* * *

### 图像背景

一个能够包含儿童元素,适合英雄分会和卡片的图像.

```tsx
// Hero section
<ImageBackground 
  src="hero-bg.jpg" 
  height={300}
  justifyContent="center"
  alignItems="center"
>
  <Text color="white" fontSize={32} fontWeight="Bold">
    Welcome
  </Text>
</ImageBackground>

// Card with background
<ImageBackground 
  src="{{product.coverImage}}"
  aspectRatio={16/9}
  borderRadius={12}
  overflow="hidden"
>
  <Box position="absolute" bottom={0} left={0} right={0} padding={16} backgroundColor="rgba(0,0,0,0.5)">
    <Text color="white">Product Name</Text>
  </Box>
</ImageBackground>

// With template URL and placeholder
<ImageBackground 
  src="{{user.coverPhoto}}"
  placeholder="default-cover.jpg"
  height={200}
>
  {children}
</ImageBackground>
```

**道具 :** `src`, (中文(简体) ), `placeholder`,所有数据 `Box` 布局/样式道具

* * *

### 🎠 wi

一个水平旋转木马/滑行手,具有多相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

```tsx
// Basic swiper
<Swiper
  data={slides}
  renderItem={({ item }) => (
    <Image src={item.image} width="100%" aspectRatio={16/9} />
  )}
/>

// With autoplay
<Swiper
  data={banners}
  autoplay
  autoplayInterval={3000}
  renderItem={({ item }) => <BannerCard banner={item} />}
/>

// Different pagination styles
<Swiper data={items} paginationType="dot" />
<Swiper data={items} paginationType="dash" />
<Swiper data={items} paginationType="line" />
<Swiper data={items} paginationType="number" />

// Custom item width
<Swiper
  data={cards}
  itemWidth={280}
  renderItem={({ item }) => <ProductCard product={item} />}
/>

// With index change callback
<Swiper
  data={onboardingScreens}
  onIndexChange={(index) => setCurrentStep(index)}
  renderItem={({ item }) => <OnboardingSlide {...item} />}
/>

// Using ref for programmatic control
const swiperRef = useRef();
<Swiper ref={swiperRef} data={items} />
<Button label="Next" action={() => swiperRef.current.scrollToIndex(2)} />
```

**缓冲类型 :** `dash`, (中文(简体) ), `dot`, (中文(简体) ), `line`, (中文(简体) ), `number`  
**道具 :** `data`, (中文(简体) ), `renderItem`, (中文(简体) ), `autoplay`, (中文(简体) ), `autoplayInterval`, (中文(简体) ), `paginationType`, (中文(简体) ), `paginationStyle`, (中文(简体) ), `itemWidth`, (中文(简体) ), `onIndexChange`

* * *

### 触发 Haptic Feedback 命令

触发对所支持设备的随机反馈的功能 .

```tsx
import { triggerHapticFeedback } from 'types-for-ai';

// On button press
const handlePress = () => {
  triggerHapticFeedback('impactMedium');
  // ... do something
};

// Success notification
const onSuccess = () => {
  triggerHapticFeedback('notificationSuccess');
};

// Error feedback
const onError = () => {
  triggerHapticFeedback('notificationError');
};

// Light tap feedback
triggerHapticFeedback('impactLight');

// Heavy impact
triggerHapticFeedback('impactHeavy');
```

**波动类型 :**

-   `impactLight` - 轻放电
-   `impactMedium` - 中型水龙头
-   `impactHeavy` - 重水龙头
-   `rigid` - 强力撞击
-   `soft` - 软撞击
-   `notificationSuccess` - 成功通知模式
-   `notificationWarning` - 警告通知模式
-   `notificationError` - 错误通知模式

* * *

## 样式系统推荐参考

所有构成部分支助 [样式系统](https://styled-system.com/) 道具 :

| 类别 | 道具 |
| --- | --- |
| **空间** | `margin`, (中文(简体) ), `marginTop`, (中文(简体) ), `marginRight`, (中文(简体) ), `marginBottom`, (中文(简体) ), `marginLeft`, (中文(简体) ), `padding`, (中文(简体) ), `paddingTop`, (中文(简体) ), `paddingRight`, (中文(简体) ), `paddingBottom`, (中文(简体) ), `paddingLeft`, (中文(简体) ), `m`, (中文(简体) ), `mt`, (中文(简体) ), `mr`, (中文(简体) ), `mb`, (中文(简体) ), `ml`, (中文(简体) ), `p`, (中文(简体) ), `pt`, (中文(简体) ), `pr`, (中文(简体) ), `pb`, (中文(简体) ), `pl` |
| **版式** | `width`, (中文(简体) ), `height`, (中文(简体) ), `minWidth`, (中文(简体) ), `maxWidth`, (中文(简体) ), `minHeight`, (中文(简体) ), `maxHeight`, (中文(简体) ), `overflow` |
| **缩写框** | `flex`, (中文(简体) ), `flexDirection`, (中文(简体) ), `flexWrap`, (中文(简体) ), `justifyContent`, (中文(简体) ), `alignItems`, (中文(简体) ), `alignSelf` |
| **边框** | `border`, (中文(简体) ), `borderWidth`, (中文(简体) ), `borderColor`, (中文(简体) ), `borderRadius`, (中文(简体) ), `borderTop`, (中文(简体) ), `borderRight`, (中文(简体) ), `borderBottom`, (中文(简体) ), `borderLeft` |
| **颜色** | `color`, (中文(简体) ), `backgroundColor`, (中文(简体) ), `bg`, (中文(简体) ), `opacity` |
| **职位** | `position`, (中文(简体) ), `top`, (中文(简体) ), `right`, (中文(简体) ), `bottom`, (中文(简体) ), `left`, (中文(简体) ), `zIndex` |
| **类型** | `fontSize`, (中文(简体) ), `fontWeight`, (中文(简体) ), `textAlign`, (中文(简体) ), `lineHeight`, (中文(简体) ), `fontFamily` |

* * *

## 主题集成

组件自动使用您样式组件的主题值 `ThemeProvider`数字 :

```tsx
const theme = {
  colors: {
    primary: '#6366f1',
    secondary: '#8b5cf6',
    'gray-100': '#f3f4f6',
    'gray-900': '#111827',
  },
  space: [0, 4, 8, 16, 24, 32, 48, 64],
  fontWeights: {
    Regular: '400',
    Medium: '500',
    Bold: '700',
  },
};

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>
```

* * *

## 许可证

麻省理工学院

## 常见问题

### @evlop/native-components 是什么？

一套有风格的系统集成的React Industrial组件,用于构建美丽,一致的UI\. 这些组件被设计用于AI-动力代码生成工具\.

### 如何安装 @evlop/native-components？

在项目目录运行 npm install @evlop/native-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、lodash（^4\.17\.15）、i18next（^21\.8\.9）、polished（^4\.3\.1）、query-string（^7\.1\.0）、react-native（^0\.76\.1）、styled-system（^5\.1\.5）、@evlop/commons（^1\.0\.137）、react-native-svg（^15\.15\.1）、styled-components（^4\.4\.1）、react-native-webview（^11\.0\.2）、@notifee/react-native（^9\.1\.8）、react-native-elements（^3\.1\.0）、react-native-tab-view（4\.3\.2）、react-native-fast-image（^8\.6\.3）、react-native-vector-icons（^10\.0\.3）、@react-navigation/elements（^2\.9\.3）、react-native-drawer-layout（^4\.2\.2）、react-native-haptic-feedback（^2\.3\.3）、react-native-safe-area-context（^4\.3\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @evlop/native-components 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @evlop/native-components 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @evlop/native-components 可以商用吗？

@evlop/native-components 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @evlop/native-components 的下载量有多少？

根据 npm 官方下载统计，@evlop/native-components 在 2026/10/14 – 2026/11/12 这 30 天内被下载 2,835 次，日均约 95 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @evlop/native-components 还在维护吗？

最新版本 1\.0\.302 发布于 2026/10/30（15 天前）；至今共发布 299 个版本，其中过去 12 个月发布了 63 个；首次发布于 2019/12/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。