---
url: https://nsh.dev/versions/v0.2.0/zh-CN/modules
description: "NSH 应用可以导入的模块、各模块导出的内容以及它们的组织方式。"
---

# 模块

NSH 应用用到的一切都从一小组模块导入。这些模块全部是原生的：响应式图、渲染器和每个模块都在运行时内部用 Rust 实现，打包器会把 `import ... from "nsh/..."` 原样保留为导入，而不会把代码复制进你的 bundle。你的 bundle 里只有你自己的代码。

```tsx
import { mount, signal } from "nsh";
import { createAnimatedValue } from "nsh/animated";
import { windowSize } from "nsh/device";
import { SafeAreaView } from "nsh/base";
```

<a id="three-layers"></a>

## 三层结构

NSH 的界面分为三层，与 GPUI Kit 的分层（`gpui`、`gpui-base`、`gpui-component`）相同：

| 层 | 模块 | 为应用提供什么 |
|---|---|---|
| 基础元素 | `nsh`、`nsh/<module>` | 响应式、宿主元素、布局、列表、画布、动画、手势、设备信息以及各平台自己的 API |
| 基础组件 | [`nsh/base`](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-base.md) | 无样式的组件，负责行为、状态、焦点和无障碍：按钮、Markdown 与 HTML 文档、导航栈与对话框、安全区域、系统对话框和软键盘，各平台通用 |
| 组件库 | 你的应用自己的，或社区提供的 | 带有外观的按钮、卡片、列表行和页面 |

应用的外观由应用自己决定。它的组件库就是第三层：用[宿主元素](https://nsh.dev/versions/v0.2.0/zh-CN/elements.md)和 `nsh/base` 写成的组件，通过 `style`、[Tailwind](https://nsh.dev/versions/v0.2.0/zh-CN/docs/tailwind.md) 类和主题设置样式；或者是它在[自己的 crate](https://nsh.dev/versions/v0.2.0/zh-CN/docs/rust.md) 中提供的 Rust 组件；也可以是社区基于同一基础发布的组件库。

NSH 没有“大而全”的汇总模块：每个 API 只存在于一个地方。平台专有的 API 位于 `nsh/ios`、`nsh/android` 和 `nsh/desktop`（macOS、Windows、Linux）；这些模块在所有平台上都可以导入，因此同一个 bundle 可以在所有平台运行（在其他平台上调用它们什么也不做，`isAvailable` 告诉你当前是否在该平台上）。

类型声明由运行时生成：`nsh init`、`nsh build`、`nsh dev` 和 `nsh test` 会在应用旁边写出 `.nsh/types`，所以 TypeScript 声明始终与你所用的运行时一致（见[项目结构](https://nsh.dev/versions/v0.2.0/zh-CN/docs/project-structure.md)）。

## 全部模块

| 模块 | 导出 | 页面 |
|---|---|---|
| `nsh` | `signal`、`computed`、`effect`、`batch`、`untracked`、`cleanup`、`context`、`split`、`mount`；原语 `View`、`Text`、`Scroll`、`Input`、[`List`](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-list.md)、[`Image`](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-image.md)（以及 `Image.getSize`、`Image.prefetch`）、[`Canvas`](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-canvas.md)（以及 `Path2D`、`CanvasRenderingContext2D`、`CanvasGradient`）、[`WebView`](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-webview.md)、[`Video`](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-video.md)；元素、样式、事件和 JSX 的类型（`YNode`、`ViewStyle` 等） | [nsh](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh.md) |
| `nsh/base` | `Button`；`TextView`、`SelectionArea`；`createNavStack`、`NavStack`、`NavPage`、`Dialog`；`SafeAreaView`、`safeArea`、`safeAreaInsets`；`AlertDialog`；`Keyboard`、`keyboardFrame`、`KeyboardAvoidingView` | [nsh/base](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-base.md) |
| `nsh/animated` | `createAnimatedValue`、`AnimatedValue`、`AnimatedNode`、`Animated`、`Easing`、`LayoutAnimation` | [nsh/animated](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-animated.md) |
| `nsh/device` | `windowSize`、`colorScheme`、`setColorScheme`、`fontScale`、`pixelRatio`、`locale`、`platform` | [nsh/device](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-device.md) |
| `nsh/gesture` | `PanResponder` | [nsh/gesture](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-gesture.md) |
| `nsh/clipboard` | `Clipboard.writeText`、`Clipboard.readText`、`Clipboard.writeImage`、`Clipboard.readImage`、`Clipboard.readFiles` | [nsh/clipboard](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-clipboard.md) |
| `nsh/storage` | `Storage.getItem`、`Storage.setItem`、`Storage.removeItem`、`Storage.keys`、`Storage.clear` | [nsh/storage](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-storage.md) |
| `nsh/keymap` | `keymap.bind`（键盘快捷键：`mod+k`、`ctrl+shift+p` 等） | [nsh/keymap](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-keymap.md) |
| `nsh/native` | `nativeComponent`、`nativeModule`（宿主应用注册的原生组件和函数） | [nsh/native](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-native.md) |
| `nsh/accessibility` | `announce`、`setAccessibilityFocus`、`screenReaderEnabled`、`reduceMotion` | [nsh/accessibility](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-accessibility.md) |
| `nsh/ios` | `isAvailable`、`InputAccessoryView` | [nsh/ios](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-ios.md) |
| `nsh/android` | `isAvailable`、`Toast`、`BackHandler` | [nsh/android](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-android.md) |
| `nsh/desktop` | `isAvailable`、`Window`（标题、标题栏、最大化、全屏）、`titleBar`、`Menu`（应用菜单、右键菜单） | [nsh/desktop](https://nsh.dev/versions/v0.2.0/zh-CN/modules/nsh-desktop.md) |
| Standard modules | `buffer`, `console`, `crypto`, `fs/promises`, `net`, `os`, `path`, `process`, `url`, `websocket`, `zlib` | [标准模块](https://nsh.dev/versions/v0.2.0/zh-CN/modules/standard-modules.md) |
| 全局对象 | `fetch`、`URL`、`TextEncoder`、`Blob`、`FormData`、`AbortController`、`Intl`、定时器、`console`、`requestAnimationFrame` 等（无需导入） | [全局 API](https://nsh.dev/versions/v0.2.0/zh-CN/modules/globals.md) |

以下参考页面不对应模块：

| 页面 | 内容 |
|---|---|
| [样式参考](https://nsh.dev/versions/v0.2.0/zh-CN/modules/style-reference.md) | 每个样式键的类型和含义 |
| [Tailwind 参考](https://nsh.dev/versions/v0.2.0/zh-CN/modules/tailwind-reference.md) | `class` 支持的 Tailwind 工具类和变体 |

## 宿主元素

宿主元素和其他一切一样是需要导入的组件：`View`、`Text`、`Scroll`、`Input`、`Image`、`List`、`Canvas`、`WebView` 和 `Video` 来自 `nsh`，基础组件（`Button`、`Dialog`、`NavStack`、`NavPage`、`SafeAreaView`、`KeyboardAvoidingView`）来自 `nsh/base`，`InputAccessoryView` 来自 `nsh/ios`。只有 `If` 和 `Each` 是全局组件。编译器会就地创建这些元素，所以导入在运行时没有任何开销。它们的属性见[元素](https://nsh.dev/versions/v0.2.0/zh-CN/elements.md)。