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
Guías de integración
Instala Chat UI Kit para React Native y envía un mensaje de prueba.
Ejemplos y código fuente
Explora la experiencia de mensajería y los recursos oficiales para desarrolladores.
Un punto de encuentro en su aplicación
Una a su comunidad mediante conversaciones móviles familiares.
Muéstralo en la conversación
Deja espacio para fotos y archivos adjuntos en el flujo del chat móvil.
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.
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ónimport { ConversationList } from
'@tencentcloud/chat-uikit-react-native';
export function Conversations() {
return <ConversationList />;
}Deje que la conversación fluya
Añade una lista de mensajes a la conversación seleccionada.
Leer la documentaciónimport { MessageList } from
'@tencentcloud/chat-uikit-react-native';
<MessageList conversationID={conversationID} />Facilita las respuestas
Conecte el campo de entrada a la misma conversación que la lista de mensajes.
Leer la documentaciónimport { MessageInput } from
'@tencentcloud/chat-uikit-react-native';
<MessageInput conversationID={conversationID} />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ónAdáptate a la forma en que las personas se conectan
Organiza las pantallas y las interacciones de grupo en torno a la navegación de tu aplicación.
Leer la documentaciónCOMENZAR
Tu primera conversación empieza aquí
- 01
- 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 - 03
Conecta a tus usuarios
Inicia sesión con dos usuarios de prueba y envía tu primer mensaje.
Conecta a tus usuarios
npm install @tencentcloud/chat-uikit-react-native tuikit-atomicx-react-nativeimport { 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
Preguntas sobre la integración
Obtén ayuda para configurar Chat UI Kit para React Native.
Ver la documentación para desarrolladoresHabla sobre tu aplicación
Conversa sobre tu producto, el uso previsto y tus necesidades de integración.
Contactar con VentasCrea tu próxima experiencia de conversación
Crea app con Chat UI Kit para React Native.

