다음을 위해 설계됨: REACT NATIVE
React Native 라이브 스트리밍 UI Kit
Tencent RTC의 React Native Live Streaming UI Kit을 사용해 모바일 방송을 추가하세요. TUILiveKit 호스트, 시청자 및 방 목록 페이지를 애플리케이션 내비게이션에 연결하세요.
개발자 리소스
React Native 라이브 스트리밍 UI Kit 문서 및 예제
React Native 기반 라이브 제품 데모
시청자가 크리에이터의 상품 시연을 보고 대화에 참여할 수 있게 하세요. 카탈로그와 구매 경험은 애플리케이션에서 관리합니다.
React Native에서 라이브 이벤트 시청
프레젠테이션과 시청자를 React Native 앱으로 가져오세요. 시청 화면을 방에 연결하여 사용자가 라이브 이벤트를 시청할 수 있도록 하세요.
REACT NATIVE LIVE 기능
React Native 라이브 스트리밍 기능
라이브 시작
- 호스트 및 시청자 역할
- 방 수명 주기 관리
사람들을 하나로 연결
- 라이브 영상 재생
- 시청자 참여
내 것으로 만들기
- 유연한 애플리케이션 레이아웃
- 플랫폼별 구성 요소
React Native 라이브 스트리밍 컴포넌트 살펴보기
호스트 화면, 시청자 화면 및 라이브 룸 목록을 애플리케이션 내비게이션에 연결하세요.
크리에이터가 시작할 공간 제공
크리에이터가 방송 전에 카메라를 미리 볼 수 있도록 React Native 호스트 준비 화면을 추가하세요. 이 화면을 인증된 호스트 계정에 연결하세요.
문서 읽기import { AnchorPage } from 'react-native-tuikit-live';
<AnchorPage onBack={goBack} onEndLive={showLiveSummary} />시청 경험을 앱의 일부로 만드세요
선택한 라이브 방으로 React Native 시청자 뷰를 여세요. 방 입장 및 퇴장을 앱 탐색 기능과 연결하세요.
문서 읽기import { LiveAudiencePage } from 'react-native-tuikit-live';
<LiveAudiencePage
onBack={goBack}
onEndLive={showLiveSummary}
/>라이브 콘텐츠 탐색의 문을 여세요
탐색 가능한 목록을 추가하고 시청 흐름에 연결하세요.
문서 읽기import { LiveListPage } from 'react-native-tuikit-live';
<LiveListPage onBack={goBack} />시작하기
React Native 앱에 라이브 스트리밍 추가
- 01
- 02
- 03
git clone https://github.com/Tencent-RTC/TUIKit_ReactNative.gitimport { useLoginState } from
'react-native-tuikit-atomic-x';
const { login } = useLoginState();
login({ sdkAppID: SDKAppID, userID, userSig });React Native 라이브 스트리밍 UI Kit 자주 묻는 질문
React Native Live UI Kit으로 무엇을 구축할 수 있나요?
React Native 라이브 스트리밍 UI Kit에는 호스트, 시청자, 방 목록 인터페이스가 포함되어 있습니다. 이러한 TUILiveKit 컴포넌트를 사용자 계정과 React Native 내비게이션에 연결하여 완전한 시청 흐름을 구축하세요.
이 UI Kit은 SDK와 어떻게 연동되나요?
UI Kit은 기반 서비스 위에 인터페이스 컴포넌트를 제공합니다. 애플리케이션 UI를 더 세밀하게 제어해야 한다면 SDK를 선택하세요.
React Native 라이브 시청자 화면을 방송에 연결하려면 어떻게 해야 하나요?
Live 서비스를 활성화하고 시청자를 인증한 후 호스트가 만든 방에 참여하세요. 별도의 계정으로 React Native 시청자 화면을 테스트하고 플랫폼 가이드에 따라 구성하세요.
React Native 라이브 스트리밍 UI Kit 사용자를 어떻게 인증하나요?
서버에서 UserSig를 생성하고 자체 로그인 흐름을 완료한 후 클라이언트에 전달하세요. 애플리케이션 시크릿은 항상 서버에 보관하세요.
React Native Live Streaming UI Kit는 무료로 사용할 수 있나요?
인터페이스와 호스팅형 Live 서비스는 역할이 서로 다릅니다. 애플리케이션에서 서비스를 활성화하고 현재 플랜, 기능 제공 여부, 사용 요금을 확인하세요.
React Native 프로젝트에 React Native 라이브 스트리밍 UI Kit를 통합하려면 어떻게 해야 하나요?
문서화된 패키지와 네이티브 의존성을 설치한 뒤 네이티브 앱을 다시 빌드하세요. JavaScript만으로 실행된다고 가정하지 말고 권한, 수명 주기와 네이티브 콜백을 확인하세요.
앱 출시 전에 React Native 라이브 스트리밍 UI Kit를 어떻게 테스트하나요?
호스트·시청자 역할, 지원 송출·재생 이벤트와 재연결을 테스트하세요.
React Native 라이브 스트리밍 UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?
복사한 live/src/pages/Anchor/index.tsx 화면과 공유 tuikit-atomic-x 리소스를 맞춤 설정하세요. 예를 들어 하단 바에 Product 동작을 추가하고 onPress를 자체 상품 카탈로그 패널에 연결할 수 있습니다. 아이콘은 tuikit-atomic-x 아래의 src/static/images에, 문구는 src/locales에 있습니다. 변경 후 다시 빌드하세요. 이 버튼은 카탈로그, 결제 절차 또는 결제 백엔드를 제공하지 않습니다. 해당 기능은 애플리케이션에서 구현해야 합니다.
React Native Live 통합 지원
React Native 앱에 라이브 스트리밍 추가
React Native Live Streaming UI Kit와 플랫폼 가이드를 활용해 크리에이터와 시청자를 연결하세요.

