다음을 위해 설계됨: REACT NATIVE

React Native
Chat UI Kit

Tencent RTC의 React Native Chat UI Kit로 모바일 대화를 추가하세요. 연동된 대화 목록, 메시지 및 입력 컴포넌트를 iOS와 Android 앱에 통합할 수 있습니다.

개발자 리소스

React Native용 Chat UI Kit 문서 및 예제

대화에 표시

모바일 채팅 흐름에 사진과 첨부 파일을 위한 공간을 마련하세요.

REACT NATIVE 채팅 기능

연결할 준비가 된 핵심 기능

대화 목록

  • 최근 대화
  • 읽지 않은 메시지 표시

메시징 UI

  • 연동된 메시지 보기
  • 통합 메시지 작성기

미디어 공유

  • 사진 및 첨부 파일
  • 네이티브 미디어 권한

사용자 및 그룹

  • 일대일 대화
  • 그룹 상호작용

내 것으로 만들기

  • UI 소스 코드 조정
  • 내비게이션에 맞게 조정

연결된 컴포넌트

  • 기반이 되는 Chat SDK
  • 애플리케이션 식별 정보

React Native Chat Components 살펴보기

컴포넌트가 어떻게 연동되는지 살펴보세요.

대화

모든 대화를 손쉽게

연동된 대화 목록에서 시작해 미리 보기를 필요에 맞게 조정하세요.

문서 읽기
Conversations.tsx
import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

export function Conversations() {
  return <ConversationList />;
}

커스터마이징

React Native 채팅 UI 맞춤 설정

고유한 시각적 스타일과 애플리케이션 흐름을 채팅에 적용하세요.

나만의 화면 만들기

모바일 브랜드에 맞게 구성 요소 스타일과 미리 보기 렌더러를 조정하세요.

문서 읽기

시작하기

첫 대화는 여기서 시작됩니다

  1. 01

    앱 만들기

    Chat 애플리케이션과 테스트 사용자를 설정하세요.

    Chat 콘솔 열기
  2. 02

    React Native용 Chat UI Kit 추가

    플랫폼 가이드에 따라 프로젝트를 연결하세요.

    통합 가이드 따르기
  3. 03

    사용자 연결

    테스트 사용자 2명으로 로그인하고 첫 메시지를 보내세요.

    사용자 연결
React Native용 Chat UI Kit
터미널
npm install @tencentcloud/chat-uikit-react-native tuikit-atomicx-react-native
Conversations.tsx
import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

export function Conversations() {
  return <ConversationList />;
}

React Native Chat UI Kit FAQ

이 컴포넌트를 Expo Go에서 사용할 수 있나요?

네이티브 종속성에는 네이티브 빌드가 필요합니다. 현재 가이드의 Expo 개발 빌드 또는 React Native 워크플로를 따르고 피어 종속성을 설치한 후 미디어 권한을 구성하세요. 컴포넌트 예시는 로그인 및 네이티브 설정이 완료되었다고 가정합니다.

React Native UI Kit는 SDK와 어떻게 다른가요?

UI Kit은 메시징 SDK 위에 연동된 인터페이스 컴포넌트를 추가합니다. 전체 인터페이스를 직접 구축하려면 Core SDK를 사용하세요.

React Native Chat UI Kit 사용자를 인증하려면 어떻게 해야 하나요?

백엔드에서 프로덕션 UserSig를 생성하세요. 인증을 위해 클라이언트에 전달하고 애플리케이션 비밀 키는 서버에 보관하세요.

이 React Native 코드 조각만으로 완전한 애플리케이션을 만들 수 있나요?

각 연동 단계를 보여 줍니다. 가져오기, 초기화, 로그인, 오류 처리 및 대상별 구성은 전체 가이드를 따르세요. 출시 전에 별도 계정으로 메시징을 테스트하세요.

React Native Chat UI Kit 사용 요금은 어떻게 책정되나요?

호스팅 Chat 서비스 사용은 선택한 요금제를 따릅니다. 애플리케이션에 제공되는 기능과 한도를 확인하세요. 선택적 플러그인과 Call 서비스에는 별도 요구 사항이 적용될 수 있습니다.

React Native 프로젝트에 React Native Chat UI Kit를 통합하려면 어떻게 해야 하나요?

문서화된 패키지와 네이티브 의존성을 설치한 뒤 네이티브 앱을 다시 빌드하세요. JavaScript만으로 실행된다고 가정하지 말고 권한, 수명 주기와 네이티브 콜백을 확인하세요.

앱 출시 전에 React Native Chat UI Kit를 어떻게 테스트하나요?

로그인, SDK 준비 상태, 송수신 이벤트, 재연결 후 메시지 상태를 확인하세요.

React Native Chat UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?

화면 수준의 변경이 필요하면 UI Kit의 화면 소스를 애플리케이션에 복사하세요. 예를 들어 ChatScreen과 로컬 스택 라우트를 조정해 기존 고객 프로필에서 대화를 열 수 있습니다. 공식 예제는 @react-navigation/native를 사용합니다. 이를 교체할 경우 복사한 화면 내부의 탐색 호출도 업데이트해야 합니다. SafeAreaProvider와 ToastRoot를 유지하고 Android 및 iOS 모두에서 맞춤 설정한 흐름을 테스트하세요.

다음 단계에 필요한 지원 찾기

다음 대화 경험 구축하기

React Native용 Chat UI Kit으로 app을 구축하세요.