@craft-native /反应

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

安装

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

使用

核心钩子

useCraft

访问Craft API：

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

获取平台信息：

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

获取设备信息：

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

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

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

UI钩子

useToast

显示吐司通知：

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

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

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

useHaptic

触发触觉反馈：

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

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

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

usePermission

请求权限:

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

管理应用窗口：

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

管理系统托盘图标：

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

发送系统通知：

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

与文件系统交互：

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数据库：

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请求：

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

听手工艺活动：

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

检查是否在手机上运行：

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

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

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

useIsDesktop

检查是否在桌面上运行：

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

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

  if (!isDesktop) return null;

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

API参考

看到 打印稿定义 获取完整的API文档。

许可证

麻省理工学院