Telegram 小程序 | TypeScript @telegram-apps/sdk-react @2.x

riyad

React.js 软件包提供开发人员在开发小型 应用程序时可能会用到的实用工具。

0 B$ i5 w7 N; m- X
+ Y( V$ D6 J% L1 G; o* f/ mTIP

由于本软件包提供了扩展 @telegram-apps/sdk 功能的实用程序函数 ，建议首先查看 SDK 软件包 文档。

安装​

在继续之前，假定您已经安装了 react 软件包，因为它是 对等软件包的依赖项。

pnpm :

1. pnpm i @telegram-apps/sdk-react

复制代码

npm :

1. npm i @telegram-apps/sdk-react

复制代码

yarn :

1. yarn add @telegram-apps/sdk-react

复制代码

INFO

此软件包完全重新导出 @telegram-apps/sdk 软件包，因此 您无需单独安装。

使用方法​

下面是该软件包的一个简单使用示例：

index.tsx

1. import ReactDOM from 'react-dom/client';
   2 g0 T5 Q. h, J& O& u
2. import { init, backButton } from '@telegram-apps/sdk-react';
   0 c% c7 j. `1 z* [& u2 I
3. 
   
4. import { BackButton } from './BackButton.js';
     [2 @; r/ h8 h) L6 j# g* B$ G
5. 
   ; l" r4 O. G- v
6. // Initialize the package.
   
7. init();
   
8. 
   
9. // Mount the Back Button, so we will work with
   
10. // the actual component properties.
    
11. backButton.mount();
    ; F4 S% S( M+ R, ?
12. 
    0 l1 J% U. |0 ^- y! \" ?
13. ReactDOM
    ! L& l  z8 u( L+ r( Q: V
14.   .createRoot(document.getElementById('root')!)
    ; R5 |: r7 \! V+ g- B7 |; h* d: N$ l
15.   .render(<BackButton/>);

复制代码

Backbutton.ts

1. import { useEffect } from 'react';
   
2. import { backButton, useSignal } from '@telegram-apps/sdk-react';
   
3. 
   7 ^$ W- N; i- }
4. /**
   4 r0 q* |; M2 e9 V6 h
5. * Component which controls the Back Button visibility.
   
6. */
   
7. export function BackButton() {
   
8.   const isVisible = useSignal(backButton.isVisible);
   
9. 
   
10.   useEffect(() => {
    + ~0 |6 Q) F+ Z( [0 E+ h
11.     console.log('The button is', isVisible ? 'visible' : 'invisible');
    7 S$ x, W9 X5 s) n/ }! @
12.   }, [isVisible]);
    ; k& }, {5 \7 L# o) {) @
13. 
    
14.   useEffect(() => {
    . Z) v; u. m) V1 S
15.     backButton.show();
    
16.     return () => {
    * X/ J  d& e# s8 _# @, U, q
17.       backButton.hide();
    
18.     };
    
19.   }, []);
    
20. 
    8 ?6 i8 L; s) P: r9 }
21.   return null;
    
22. }

复制代码

Hooks​useSignal​

该辅助工具允许开发人员在 应用程序中使用我们的 signals。

它返回基础值，并在信号值发生变化时进行更新。

1. import { useEffect } from 'react';
   
2. import { backButton, useSignal } from '@telegram-apps/sdk-react';
   
3. 
   
4. function Component() {
   ; W* r0 R' \5 D3 w
5.   const isVisible = useSignal(backButton.isVisible);
   # q$ l& O" ]1 N( p. z) x# ?
6. 
   
7.   useEffect(() => {
   
8.     console.log('The button is', isVisible ? 'visible' : 'invisible');
   + G( o1 t8 w9 [' r
9.   }, [isVisible]);
     u) a0 p) i  {4 |: U9 v9 G  u
10. 
    1 W! h* `; I3 {
11.   useEffect(() => {
    
12.     backButton.show();
    
13.     return () => {
    
14.       backButton.hide();
    
15.     };
    + h( K0 M! h  {- V
16.   }, []);
    6 j& W+ s/ @7 R8 M( [- I; a( g
17. 
      L* S( a# x7 a( Q
18.   return null;
    5 Y( U; P2 m5 o4 S
19. }

复制代码

useLaunchParams​

返回迷你应用程序启动参数的函数。

1. import { useLaunchParams } from '@telegram-apps/sdk-react';
   2 j, E0 A! S, n/ u/ {5 n( |( o) U  U
2. 
   
3. function Component() {
   
4.   const lp = useLaunchParams();
   
5.   return <div>Start parameter: {lp.startParam}</div>;
   
6. }

复制代码