以下の用途向け：REACT NATIVE

React Native
Chat UI Kit

Tencent RTC の React Native Chat UI Kit でモバイル会話を追加できます。連携済みの会話一覧、メッセージ、入力コンポーネントを iOS・Android アプリに組み込めます。

構築を始める Chat デモを試す

開発者向けリソース

React Native 向け Chat UI Kitのドキュメントとサンプル

コンポーネントリファレンス

React Native 向け Chat UI Kit コンポーネントをご覧ください。

コンポーネントを見るユーザー認証

導入ガイド

React Native 向け Chat UI Kit をインストールしてテストメッセージを送信します。

React Native の導入クイックスタート

サンプルとソース

メッセージング体験と公式の開発者向けリソースをご覧ください。

Chat デモを試す React Native ソースコードを見る

アプリ内の交流スペース

使い慣れたモバイル会話でコミュニティをつなぎます。

コミュニティチャットを見る

会話内に表示

モバイルチャットの流れに写真や添付ファイルを組み込みましょう。

統合ガイドを読む

REACT NATIVE のチャット機能

すぐに接続できる基本機能

会話リスト

最近の会話
未読メッセージインジケーター

メッセージング UI

連携されたメッセージビュー
統合されたメッセージ作成欄

メディア共有

写真と添付ファイル
ネイティブのメディア権限

ユーザーとグループ

ダイレクト会話
グループでの交流

自分らしく仕上げる

UI のソースコードをカスタマイズ
ナビゲーションに合わせて調整

連携コンポーネント

基盤となる Chat SDK
アプリケーションの識別情報

React Native Chat Components を見る

各コンポーネントの連携方法をご覧ください。

会話

すべての会話をすぐ手元に

連携済みの会話リストから始めて、プレビューを用途に合わせて調整します。

ドキュメントを読む

import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

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

メッセージ

会話を自然に展開

選択した会話にメッセージリストを追加します。

ドキュメントを読む

import { MessageList } from
  '@tencentcloud/chat-uikit-react-native';

<MessageList conversationID={conversationID} />

メッセージ入力欄

返信しやすくする

入力欄をメッセージ一覧と同じ会話に接続します。

ドキュメントを読む

import { MessageInput } from
  '@tencentcloud/chat-uikit-react-native';

<MessageInput conversationID={conversationID} />

カスタマイズ

React Native チャット UI をカスタマイズ

独自のビジュアルスタイルとアプリケーションフローをチャットに反映できます。

自分らしい画面に

コンポーネントのスタイルとプレビューレンダラーを、モバイルブランドに合わせて調整します。

ドキュメントを読む

始める

最初の会話はここから始まります

01
アプリを作成
Chat アプリケーションとテストユーザーを設定します。
Chat コンソールを開く
02
React Native 向け Chat UI Kit を追加する
プラットフォームガイドに沿ってプロジェクトを接続します。
統合ガイドに従う
03
ユーザーをつなぐ
2人のテストユーザーとしてサインインし、最初のメッセージを送信します。
ユーザーをつなぐ

React Native 向け Chat UI Kit

npm install @tencentcloud/chat-uikit-react-native tuikit-atomicx-react-native

import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

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

React Native Chat UI Kit のよくある質問

これらのコンポーネントは Expo Go で使用できますか？

ネイティブ依存関係にはネイティブビルドが必要です。現行ガイドの Expo 開発ビルドまたは React Native ワークフローに従い、ピア依存関係をインストールしてメディア権限を設定してください。コンポーネントの抜粋は、ログインとネイティブ設定が完了していることを前提としています。

統合ガイドを読む

React Native UI Kit と SDK の違いは何ですか？

UI Kit は、メッセージング SDK の上に連携済みのインターフェースコンポーネントを追加します。インターフェース全体を自作する場合は Core SDK を使用してください。

Core SDK を見る

React Native Chat UI Kit のユーザーを認証するにはどうすればよいですか？

本番用 UserSig はバックエンドで生成します。認証のためにクライアントへ渡し、アプリケーションシークレットはサーバー上で管理してください。

認証ガイドを読む

これらの React Native スニペットだけで完全なアプリケーションになりますか？

ここでは個別の連携手順を示しています。インポート、初期化、ログイン、エラー処理、対象別の設定については、完全なガイドに従ってください。リリース前に、別々のアカウントでメッセージングをテストしてください。

チュートリアル全体を見る

React Native Chat UI Kit の利用料金はどのように計算されますか？

ホステッド Chat サービスの利用は、選択したプランに従います。アプリケーションで利用できる付属機能と利用枠を確認してください。オプションのプラグインと Call サービスには、別の要件が適用される場合があります。

Chat の料金を見る

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 のセットアップに関するヘルプをご覧ください。

開発者向けドキュメントを表示

アプリケーションについて相談

製品、想定利用量、統合要件についてご相談ください。

営業担当者への連絡

次の会話体験を構築

React Native 向け Chat UI Kit を使って app を構築します。

無料で始める UI Kit ガイドを見る

React Native Chat UI Kit

React Native 向け Chat UI Kitのドキュメントとサンプル

コンポーネントリファレンス

導入ガイド

サンプルとソース

アプリ内の交流スペース

会話内に表示

すぐに接続できる基本機能

会話リスト

メッセージング UI

メディア共有

ユーザーとグループ

自分らしく仕上げる

連携コンポーネント

React Native Chat Components を見る

すべての会話をすぐ手元に

会話を自然に展開

返信しやすくする

React Native チャット UI をカスタマイズ

自分らしい画面に

人々のつながり方にフィット

最初の会話はここから始まります

アプリを作成

React Native 向け Chat UI Kit を追加する

ユーザーをつなぐ

React Native Chat UI Kit のよくある質問

これらのコンポーネントは Expo Go で使用できますか？

React Native UI Kit と SDK の違いは何ですか？

React Native Chat UI Kit のユーザーを認証するにはどうすればよいですか？

これらの React Native スニペットだけで完全なアプリケーションになりますか？

React Native Chat UI Kit の利用料金はどのように計算されますか？

React Native で React Native Chat UI Kit を導入するには？

アプリのリリース前に React Native Chat UI Kit をテストするには？

React Native Chat UI Kit のインターフェースをカスタマイズするには？

次のステップに必要なサポートを見つける

統合に関する質問

アプリケーションについて相談

次の会話体験を構築

React Native
Chat UI Kit