包

@lia-labs/sdk-react

复制页面

React 的 Lia SDK 的钩子。初始化，Lia 的状态作为钩子，以及 Lia 的按钮在组件挂载时显示。

npm install @lia-labs/sdk @lia-labs/sdk-react

反应 18 或 19. 所有内容从 @lia-labs/sdk 被重新导出，因此请全部从此处导入。

#一个应用

import { useEffect, useState } from 'react';
import { isLia, mockLia, pay, ready, useBackButton, useClosingConfirmation, useInit, useLanguage, useMainButton } from '@lia-labs/sdk-react';

if (!isLia()) mockLia(); // building in a desktop browser

export function App() {
  const lia = useInit();
  const language = useLanguage();
  const [screen, setScreen] = useState<'home' | 'game'>('home');

  useEffect(() => {
    if (lia.status === 'ready') ready();
  }, [lia.status]);

  useMainButton(screen === 'home' && { text: 'Buy extra lives', onClick: () => pay('extra-lives') });
  useBackButton(screen === 'game' && (() => setScreen('home')));
  useClosingConfirmation(screen === 'game');

  if (lia.status === 'loading') return null;
  if (lia.status === 'error') return <p>Open this app inside Lia.</p>;
  return <h1>Hello, @{lia.result.player.name} ({language})</h1>;
}

#钩子

钩子	给你
`useInit(options?)`	`{ status: "加载中"
`useSignal(value)`	任何 SDK 值作为状态（基于 `useSyncExternalStore`).
`usePlayer()`, `useMode()`	玩家，以及测试或生产环境。
`useLanguage()`, `useRtl()`	这个人'的语言。
`useColorScheme()`, `useThemeParams()`	浅色或深色，以及 Lia'的颜色。
`useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`	布局。
`useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	其余Lia'的状态。
`useBannerAd(position)`, `useBanner()`, `useNativeAd()`	将横幅停靠在挂载时（`"bottom"`, `"top"`，或者null表示无），以及横幅和原生广告现在。
`useLiaEvent(event, handler)`	监听 Lia 中的一个'的事件在挂载时（始终调用你的最新处理程序）。
`useMainButton(options)`, `useSecondaryButton(options)`	显示按钮，挂载时显示。 `options` 是 `{ text, onClick, isActive, isProgressVisible, color, textColor, position }`; 传递 `null` 或 `false` 隐藏它。你最新的 `onClick` 始终被使用。
`useBackButton(onBack)`	显示标题's 在挂载时按返回按钮； `null` 或 `false` 隐藏它。
`useSettingsButton(onOpen)`	在挂载时在 ⋯ 菜单中的设置
`useClosingConfirmation(enabled?)`	在启用时询问关闭
`useVerticalSwipesDisabled(disabled?)`	向下滑动赢了't 在禁用时关闭表格。

#忙碌状态

const [busy, setBusy] = useState(false);
useMainButton({
  text: 'Buy',
  isProgressVisible: busy,
  onClick: async () => {
    setBusy(true);
    try { await buy(); } finally { setBusy(false); }
  },
});

#服务器渲染

钩子直接从SDK 读取第一个值，因此它们在服务器上也会渲染（默认值：英语、浅色、未初始化）。 init() 仅在浏览器中运行，在一个效果中。

自动翻译。英语是真实来源。阅读英文