الحزم

@lia-labs/sdk-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?)`	`{ الحالة: "جاري التحميل"
`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)`	يظهر العنوان'زر العودة الخاص به أثناء التثبيت; `null` أو `false` يُخفيها.
`useSettingsButton(onOpen)`	الإعدادات في قائمة ⋯ أثناء التثبيت.
`useClosingConfirmation(enabled?)`	يطلب التأكيد قبل الإغلاق أثناء التفعيل.
`useVerticalSwipesDisabled(disabled?)`	الانزلاق لأسفل فاز'ت إغلاق الجدول بينما معطل.

#حالات التحميل

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

#عرض الخادم

الأسلاك تقرأ أول قيمة مباشرة من SDK، لذلك يتم عرضها على الخادم أيضًا (مع القيم الافتراضية: الإنجليزية، الإضاءة، غير المُعدة). init() يُنفذ فقط في المتصفح، في تأثير.

تم الترجمة تلقائيًا. الإنجليزية هي مصدر الحقيقة. اقرأ باللغة الإنجليزية