# @androidtui/solid 中文文档

规范地址：https://npmcn.com/package/%40androidtui/solid/

版本：0\.8\.3
npm 元数据更新时间：2026-11-08T23:54:00.986Z
中文译文更新时间：2026-11-09T21:48:59.847Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40androidtui/solid
原文对照：https://npmcn.com/package/%40androidtui/solid/?lang=original
项目主页：https://github.com/bd-loser/opentui#readme
源码仓库：https://github.com/bd-loser/opentui

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

- 包体积（解压后）：342 kB，49 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：solid-js ^1\.9\.12
- 首次发布：2026-08-09T04:50:44.740Z
- 最新版本发布：2026-11-08T23:54:00.820Z
- 近 30 天下载量：1713（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 30 个）

## 中文简介

Android和Termux上的 OpenTUI 终端应用程序的 SolidJS 渲染器

## 安装

```sh
npm install @androidtui/solid
```

也可以使用：`pnpm add @androidtui/solid`、`yarn add @androidtui/solid`、`bun add @androidtui/solid`

## README

# @ opentui/ 固态

Solid.js 对 [打开TUI](https://github.com/anomalyco/opentui)。 。 。 .

## 安装

```bash
bun install solid-js@^1.9 @opentui/solid
```

## 使用量

1.  在 tsconfig.json 中添加 jsx 配置 :

```json
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@opentui/solid"
  }
}
```

2.  添加预装脚本到 bunfig.toml :

```toml
preload = ["@opentui/solid/preload"]
```

3.  向 index.tsx 添加渲染函数 :

```tsx
import { render } from "@opentui/solid"

render(() => <text>Hello, World!</text>)
```

4.  运行 `bun index.tsx`。 。 。 .
    
5.  建设用途 [Bun. 建设](https://bun.com/docs/bundler) (单位:千美元)[来源](https://github.com/anomalyco/opentui/issues/122):
    

```ts
import solidPlugin from "@opentui/solid/bun-plugin"

await Bun.build({
  entrypoints: ["./index.tsx"],
  target: "bun",
  outdir: "./build",
  plugins: [solidPlugin],
  compile: {
    target: "bun-darwin-arm64",
    outfile: "app-macos",
  },
})
```

## 目录

-   [核心概念](https://npmcn.com/package/%40androidtui/solid/#readme-core-concepts)
    -   [构成部分](https://npmcn.com/package/%40androidtui/solid/#readme-components)
-   [API 参考](https://npmcn.com/package/%40androidtui/solid/#readme-api-reference)
    -   [渲染( 节点、 渲染器)](https://npmcn.com/package/%40androidtui/solid/#readme-rendernode-rendererorconfig)
    -   [测试Render( 节点, 选项)](https://npmcn.com/package/%40androidtui/solid/#readme-testrendernode-options)
    -   [扩展( 组件)](https://npmcn.com/package/%40androidtui/solid/#readme-extendcomponents)
    -   [获取组件目录( C)](https://npmcn.com/package/%40androidtui/solid/#readme-getcomponentcatalogue)
    -   [钩子](https://npmcn.com/package/%40androidtui/solid/#readme-hooks)
    -   [门户](https://npmcn.com/package/%40androidtui/solid/#readme-portal)
    -   [动态](https://npmcn.com/package/%40androidtui/solid/#readme-dynamic)
-   [构成部分](https://npmcn.com/package/%40androidtui/solid/#readme-components-1)
    -   [布局显示( D)](https://npmcn.com/package/%40androidtui/solid/#readme-layout--display)
    -   [投入](https://npmcn.com/package/%40androidtui/solid/#readme-input)
    -   [代码diff( D)](https://npmcn.com/package/%40androidtui/solid/#readme-code--diff)
    -   [文本修改器](https://npmcn.com/package/%40androidtui/solid/#readme-text-modifiers)

## 核心概念

### 构成部分

打开TUI 实心暴露出内在JSX元素

-   **显示布局( D) :** `text`, (中文(简体) ), `box`, (中文(简体) ), `scrollbox`, (中文(简体) ), `ascii_font`
-   **输入 :** `input`, (中文(简体) ), `textarea`, (中文(简体) ), `select`, (中文(简体) ), `tab_select`
-   **代码( D) :** `code`, (中文(简体) ), `line_number`, (中文(简体) ), `diff`
-   **文本修改器 :** `span`, (中文(简体) ), `strong`, (中文(简体) ), `b`, (中文(简体) ), `em`, (中文(简体) ), `i`, (中文(简体) ), `u`, (中文(简体) ), `br`, (中文(简体) ), `a`

## API 参考

### `render(node, rendererOrConfig?)`

将固体元件树放入 CLI 渲染器。 如果你遗漏 `rendererOrConfig`, (中文(简体) ), `render()` 创建带有默认选项的渲染器. `render()` 返回一个在初始挂载后解决的保证。 破坏出质器会处理固体根.

```tsx
import { render } from "@opentui/solid"

render(() => <App />)
```

**参数:**

-   `node`: 函数返回 JSX 元素.
-   `rendererOrConfig?`数字 : `CliRenderer` 实例或 `CliRendererConfig`。 。 。 .

### `testRender(node, options?)`

创建用于快照和交互测试的测试渲染器.

```tsx
import { testRender } from "@opentui/solid"

const testSetup = await testRender(() => <App />, { width: 40, height: 10 })
```

### `extend(components)`

将自定义可转换成JSX内在要素.

```tsx
import { extend } from "@opentui/solid"

extend({ customBox: CustomBoxRenderable })
```

固态调用构造器 `{ id }` 只有这个 建造后,Solid将每个JSX道具应用于实例. 类 仅从其构建者选项中读取一个值并不能从JSX中得到这个值.

### `getComponentCatalogue()`

返回当前授权 JSX 标记搜索的组件目录 .

### 钩子

-   `useRenderer()`
-   `onResize(callback)`
-   `onFocus(callback)`
-   `onBlur(callback)`
-   `useTerminalDimensions()`
-   `useKeyboard(handler, options?)`
-   `usePaste(handler)`
-   `useSelectionHandler(handler)`
-   `useTimeline(options?)`

### `Portal`

孩子们进入另一个山地节点。 用于叠加和工具提示.

```tsx
import { Portal } from "@opentui/solid"
;<Portal mount={renderer.root}>
  <box border>Overlay</box>
</Portal>
```

### `Dynamic`

动态渲染任意的内在元素或组件.

```tsx
import { Dynamic } from "@opentui/solid"
;<Dynamic component={isMultiline() ? "textarea" : "input"} />
```

## 构成部分

### 布局显示( D)

-   `text`: 有样式的文本容器
-   `box`: 设置有边框、垫装和弹性设置的容器
-   `scrollbox`: 可滚动容器
-   `ascii_font`: ASCII 艺术文本渲染器

对于 QR 代码, 调用 `registerQRCode()` 从 `@opentui/qrcode/solid`登记 `qr_code` 键.

### 投入

-   `input`: 单行文本输入
-   `textarea`: 多行文本输入
-   `select`: 列表选择
-   `tab_select`: 基于标签的选择

### 代码diff( D)

-   `code`: 语法高亮的代码块
-   `line_number`: 有 diff/ 诊断帮助的行码显示
-   `diff`: 统一或分割 diff 查看器

### 文本修改器

仅在 a 内使用 `text` 组件 :

-   `span`: 内置样式文本
-   `strong`编号 :`b`: 粗体文字
-   `em`编号 :`i`: 斜体文字
-   `u`: 下划线文本
-   `br`: 换行符
-   `a`: 链接文本与 `href`

## 常见问题

### @androidtui/solid 是什么？

Android和Termux上的 OpenTUI 终端应用程序的 SolidJS 渲染器

### 如何安装 @androidtui/solid？

在项目目录运行 npm install @androidtui/solid，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：solid-js（^1\.9\.12）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @androidtui/solid 支持 TypeScript 吗？

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

### @androidtui/solid 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @androidtui/solid 可以商用吗？

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

### @androidtui/solid 的下载量有多少？

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

### @androidtui/solid 还在维护吗？

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