CREADO PARA REACT NATIVE

React Native
Chat UI Kit

Añade conversaciones móviles con el React Native Chat UI Kit de Tencent RTC. Integra listas de conversaciones conectadas, mensajes y componentes de entrada en tu aplicación para iOS y Android.

RECURSOS PARA DESARROLLADORES

Documentación y ejemplos de Chat UI Kit para React Native

FUNCIONES DE CHAT PARA REACT NATIVE

Funciones esenciales, listas para conectar

Listas de conversaciones

  • Conversaciones recientes
  • Indicadores de mensajes no leídos

Interfaz de mensajería

  • Vistas de mensajes integradas
  • Un editor de mensajes integrado

Uso compartido de contenido multimedia

  • Fotos y archivos adjuntos
  • Permisos multimedia nativos

Personas y grupos

  • Conversaciones directas
  • Interacciones grupales

Hazlo tuyo

  • Adapta el código fuente de la interfaz
  • Adáptalo a tu navegación

Componentes conectados

  • Chat SDK subyacente
  • La identidad de tu aplicación

Explora React Native Chat Components

Descubre cómo funcionan juntos los componentes.

Conversaciones

Todas las conversaciones a tu alcance

Comienza con una lista de conversaciones conectada y adapta sus vistas previas según sea necesario.

Leer la documentación
Conversations.tsx
import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

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

PERSONALIZACIÓN

Personaliza tu interfaz de chat en React Native

Incorpore su estilo visual y el flujo de su aplicación al chat.

Personaliza tu pantalla

Adapta los estilos de los componentes y los renderizadores de vista previa a tu marca móvil.

Leer la documentación

COMENZAR

Tu primera conversación empieza aquí

  1. 01

    Crea tu app

    Configura una aplicación de Chat y tus usuarios de prueba.

    Abrir la consola de Chat
  2. 02

    Añade Chat UI Kit para React Native

    Sigue la guía de la plataforma para conectar tu proyecto.

    Sigue la Guía de integración
  3. 03

    Conecta a tus usuarios

    Inicia sesión con dos usuarios de prueba y envía tu primer mensaje.

    Conecta a tus usuarios
Chat UI Kit para React Native
Terminal
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 />;
}

Preguntas frecuentes sobre React Native Chat UI Kit

¿Puedo usar estos componentes en Expo Go?

Las dependencias nativas requieren una compilación nativa. Siga la compilación de desarrollo de Expo o el flujo de trabajo de React Native que se indican en la guía actual, instale las dependencias peer y configure los permisos multimedia. Los extractos de componentes presuponen que el inicio de sesión y la configuración nativa ya se han completado.

¿En qué se diferencia React Native UI Kit del SDK?

El UI Kit añade componentes de interfaz integrados sobre el SDK de mensajería. Usa el Core SDK si quieres crear toda la interfaz por tu cuenta.

¿Cómo autentico a los usuarios de React Native Chat UI Kit?

Genera el UserSig de producción en tu backend. Envíalo al cliente para la autenticación y conserva el secreto de la aplicación en el servidor.

¿Estos fragmentos de React Native forman una aplicación completa?

Muestran pasos individuales de la integración. Sigue la guía completa para las importaciones, la inicialización, el inicio de sesión, la gestión de errores y la configuración específica de la plataforma de destino. Prueba la mensajería con cuentas separadas antes del lanzamiento.

¿Cómo se calcula el precio de uso de React Native Chat UI Kit?

El uso del servicio Chat alojado depende del plan seleccionado. Consulta las funciones y cuotas incluidas para tu aplicación; los plugins opcionales y los servicios Call pueden tener requisitos distintos.

¿Cómo integro Chat UI Kit React Native con React Native?

Instala el paquete y las dependencias nativas documentadas y recompila tu aplicación nativa. Verifica los permisos, el ciclo de vida y los callbacks nativos sin asumir un entorno solo JavaScript.

¿Cómo pruebo Chat UI Kit React Native antes de publicar mi aplicación?

Comprueba inicio de sesión, disponibilidad del SDK, eventos de envío y recepción y estado de mensajes tras reconectar.

¿Cómo personalizo la interfaz de Chat UI Kit React Native?

Copia las pantallas del UI Kit en tu aplicación cuando necesites cambios a nivel de pantalla. Por ejemplo, ajusta ChatScreen y las rutas locales de la pila para abrir una conversación desde el perfil de cliente que ya tienes. El ejemplo oficial usa @react-navigation/native; sustituirlo también exige actualizar las llamadas de navegación dentro de las pantallas copiadas. Conserva SafeAreaProvider y ToastRoot, y prueba el flujo personalizado tanto en Android como en iOS.

Encuentra ayuda para el siguiente paso

Habla sobre tu aplicación

Conversa sobre tu producto, el uso previsto y tus necesidades de integración.

Contactar con Ventas

Crea tu próxima experiencia de conversación

Crea app con Chat UI Kit para React Native.