# @craft-native/react 中文文档

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

版本：0\.0\.413
npm 元数据更新时间：2026-10-31T21:02:21.477Z
中文译文更新时间：2026-10-31T21:15:57.972Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40craft-native/react
原文对照：https://npmcn.com/package/%40craft-native/react/?lang=original
项目主页：https://github.com/craft-native/craft/tree/main/packages/react#readme
源码仓库：https://github.com/craft-native/craft

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

- 包体积（解压后）：53.6 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=16\.8\.0
- 首次发布：2026-08-23T01:42:02.147Z
- 最新版本发布：2026-10-31T21:02:21.139Z
- 已发布版本数：212（近 12 个月 212 个）

## 中文简介

Craft框架的React绑定

## 安装

```sh
npm install @craft-native/react
```

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

## README

# @craft-native /反应

Craft框架的React绑定。提供钩子来访问React应用程序中的本地功能。

## 安装

```bash
npm install @craft-native/react
# or
yarn add @craft-native/react
# or
pnpm add @craft-native/react
```

## 使用

### 核心钩子

#### useCraft

访问Craft API：

```tsx
import { useCraft } from '@craft-native/react';

function App() {
  const { craft, isReady } = useCraft();

  if (!isReady) {
    return <div>Loading...</div>;
  }

  return <div>Craft is ready!</div>;
}
```

#### usePlatform

获取平台信息：

```tsx
import { usePlatform } from '@craft-native/react';

function PlatformInfo() {
  const { platform, loading } = usePlatform();

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      Platform: {platform?.platform}
      Version: {platform?.version}
    </div>
  );
}
```

#### useDeviceInfo

获取设备信息：

```tsx
import { useDeviceInfo } from '@craft-native/react';

function DeviceInfo() {
  const { deviceInfo } = useDeviceInfo();

  return (
    <div>
      Model: {deviceInfo?.model}
      OS: {deviceInfo?.os_version}
    </div>
  );
}
```

### UI钩子

#### useToast

显示吐司通知：

```tsx
import { useToast } from '@craft-native/react';

function ToastExample() {
  const { showToast } = useToast();

  return (
    <button onClick={() => showToast('Hello!', 'short')}>
      Show Toast
    </button>
  );
}
```

#### useHaptic

触发触觉反馈：

```tsx
import { useHaptic } from '@craft-native/react';

function HapticButton() {
  const { haptic } = useHaptic();

  return (
    <button onClick={() => haptic('impact_medium')}>
      Tap Me
    </button>
  );
}
```

#### usePermission

请求权限:

```tsx
import { usePermission } from '@craft-native/react';

function CameraPermission() {
  const { granted, request, loading } = usePermission('camera');

  return (
    <div>
      {granted === null && (
        <button onClick={request} disabled={loading}>
          Request Camera Access
        </button>
      )}
      {granted && <div>Camera access granted!</div>}
      {granted === false && <div>Camera access denied</div>}
    </div>
  );
}
```

### 窗口管理

#### useWindow

管理应用窗口：

```tsx
import { useWindow } from '@craft-native/react';

function WindowControls() {
  const { maximize, minimize, toggleFullscreen, isFullscreen } = useWindow();

  return (
    <div>
      <button onClick={maximize}>Maximize</button>
      <button onClick={minimize}>Minimize</button>
      <button onClick={toggleFullscreen}>
        {isFullscreen ? 'Exit' : 'Enter'} Fullscreen
      </button>
    </div>
  );
}
```

### 系统集成

#### useTray

管理系统托盘图标：

```tsx
import { useTray } from '@craft-native/react';

function TrayManager() {
  const { create, setMenu } = useTray();

  useEffect(() => {
    create('/path/to/icon.png', 'My App');
    setMenu([
      { id: 'show', label: 'Show Window' },
      { id: 'quit', label: 'Quit', type: 'normal' },
    ]);
  }, []);

  return null;
}
```

#### useNotification

发送系统通知：

```tsx
import { useNotification } from '@craft-native/react';

function NotificationExample() {
  const { send } = useNotification();

  const notify = () => {
    send({
      title: 'Hello!',
      body: 'This is a notification',
    });
  };

  return <button onClick={notify}>Notify</button>;
}
```

### 文件系统

#### useFileSystem

与文件系统交互：

```tsx
import { useFileSystem } from '@craft-native/react';

function FileEditor() {
  const { readFile, writeFile, loading, error } = useFileSystem();
  const [content, setContent] = useState('');

  const load = async () => {
    const data = await readFile('/path/to/file.txt');
    setContent(data);
  };

  const save = async () => {
    await writeFile('/path/to/file.txt', content);
  };

  return (
    <div>
      <textarea value={content} onChange={(e) => setContent(e.target.value)} />
      <button onClick={load}>Load</button>
      <button onClick={save}>Save</button>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
    </div>
  );
}
```

### 数据库

#### useDatabase

使用SQLite数据库：

```tsx
import { useDatabase } from '@craft-native/react';

function TodoList() {
  const { query, execute } = useDatabase('/path/to/db.sqlite');
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    loadTodos();
  }, []);

  const loadTodos = async () => {
    const results = await query('SELECT * FROM todos');
    setTodos(results);
  };

  const addTodo = async (title: string) => {
    await execute('INSERT INTO todos (title) VALUES (?)', [title]);
    await loadTodos();
  };

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}
```

### HTTP请求

#### useHttp

发送HTTP请求：

```tsx
import { useHttp } from '@craft-native/react';

function ApiExample() {
  const { fetch, loading } = useHttp();
  const [data, setData] = useState(null);

  const loadData = async () => {
    const result = await fetch('https://api.example.com/data');
    setData(result);
  };

  return (
    <div>
      <button onClick={loadData} disabled={loading}>
        Load Data
      </button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}
```

### 事件处理

#### useCraftEvent

听手工艺活动：

```tsx
import { useCraftEvent } from '@craft-native/react';

function EventListener() {
  useCraftEvent('app.ready', () => {
    console.log('App is ready!');
  });

  useCraftEvent('window.close', () => {
    console.log('Window is closing');
  });

  return <div>Listening to events...</div>;
}
```

### 效用钩子

#### useIsMobile

检查是否在手机上运行：

```tsx
import { useIsMobile } from '@craft-native/react';

function ResponsiveComponent() {
  const isMobile = useIsMobile();

  return <div>{isMobile ? 'Mobile View' : 'Desktop View'}</div>;
}
```

#### useIsDesktop

检查是否在桌面上运行：

```tsx
import { useIsDesktop } from '@craft-native/react';

function DesktopOnly() {
  const isDesktop = useIsDesktop();

  if (!isDesktop) return null;

  return <div>Desktop-only features</div>;
}
```

## API参考

看到 [打印稿定义](https://npmcn.com/package/%40craft-native/react/dist/index.d.ts) 获取完整的API文档。

## 许可证

麻省理工学院

## 常见问题

### @craft-native/react 是什么？

Craft框架的React绑定

### 如何安装 @craft-native/react？

在项目目录运行 npm install @craft-native/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @craft-native/react 支持 TypeScript 吗？

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

### @craft-native/react 支持 ESM 还是 CommonJS？

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

### @craft-native/react 可以商用吗？

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

### @craft-native/react 还在维护吗？

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