Gói

@lia-labs/sdk-react

Sao chép trang

Các hook React cho Lia SDK. Khởi tạo, trạng thái của Lia dưới dạng hook, và nút của Lia được hiển thị khi một thành phần được gắn kết.

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

React 18 hoặc 19. Mọi thứ từ @lia-labs/sdk được xuất khẩu lại, vì vậy hãy nhập tất cả từ đây.

#Một ứng dụng

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>;
}

#Gắn

Gắn	Cung cấp cho bạn
`useInit(options?)`	`{ trạng thái: "đang tải"
`useSignal(value)`	Một giá trị SDK bất kỳ dưới dạng trạng thái (xây dựng trên `useSyncExternalStore`).
`usePlayer()`, `useMode()`	Người chơi, và kiểm tra hoặc trực tiếp.
`useLanguage()`, `useRtl()`	Người'ngôn ngữ của nó.
`useColorScheme()`, `useThemeParams()`	Ánh sáng hoặc tối, và Lia'màu sắc.
`useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`	Bố cục.
`useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	Phần còn lại của Lia'trạng thái.
`useBannerAd(position)`, `useBanner()`, `useNativeAd()`	Gắn một thanh thông báo khi được cài đặt (`"bottom"`, `"top"`, hoặc null cho không có gì), và banner và quảng cáo bản địa hiện tại.
`useLiaEvent(event, handler)`	Lắng nghe một trong Lia'sự kiện khi được gắn kết (luôn gọi hàm xử lý mới nhất của bạn).
`useMainButton(options)`, `useSecondaryButton(options)`	Hiển thị nút khi được gắn kết. `options` là `{ text, onClick, isActive, isProgressVisible, color, textColor, position }`; truyền `null` hoặc `false` ẩn nó đi. Phiên bản mới nhất của bạn `onClick` luôn được sử dụng.
`useBackButton(onBack)`	Hiển thị tiêu đề'nút quay lại khi đang được hiển thị; `null` hoặc `false` ẩn nó.
`useSettingsButton(onOpen)`	Cài đặt trong menu ⋯ khi đã gắn.
`useClosingConfirmation(enabled?)`	Hỏi trước khi đóng khi được kích hoạt.
`useVerticalSwipesDisabled(disabled?)`	Một lần vuốt xuống đã thắng't đóng bảng khi bị vô hiệu hóa.

#Trạng thái bận

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

#Hiển thị trên máy chủ

Các hook đọc giá trị đầu tiên trực tiếp từ SDK, vì vậy chúng cũng được hiển thị trên máy chủ (với mặc định: tiếng Anh, chế độ sáng, chưa khởi tạo). init() chỉ chạy trong trình duyệt, trong một hiệu ứng.

Được dịch tự động. Tiếng Anh là nguồn tin cậy. Đọc bằng tiếng Anh