SuperAPI AI 工具集

cometchat-react-native-components

前端与建站

查看项目

更新于 10-21 20:39

技能介绍

本技能是 CometChat React Native UI Kit v5 的组件目录与用法参考,用于回答“某个功能该用哪个组件”“如何自定义列表行或消息气泡”“v5 自带哪些组件”等问题。其事实依据为 rn-v5.json 目录(216 个公开符号),该封闭列表即完整目录,不在其中的组件即不存在。

用途

当需要确定某个界面元素对应的组件、在组件内部插入自定义 UI、或确认 v5 组件范围时使用本技能。它假定使用者已掌握配套技能 cometchat-react-native-core(安装、Provider 链、init→login→render),因此不重复这些内容。除核心技能外无额外前置条件或安装步骤。

主要能力

技能提供按类别组织的组件清单:

列表类:CometChatConversations(最近会话列表,常用入口屏)、CometChatUsers(用户目录)、CometChatGroups(群组目录)、CometChatGroupMembers(群组活跃成员,不含被封禁成员)。

消息面板类:CometChatMessageHeader(标题、在线状态、返回、通话按钮)、CometChatMessageList(滚动历史,渲染气泡、回执、表情回应)、CometChatMessageComposer(输入、附件、语音消息)、CometChatCompactMessageComposer(紧凑布局的单行输入)、CometChatThreadHeader(线程回复,在 RN 中是独立屏幕而非侧栏)、CometChatMessageInformation(单条消息的送达/已读详情)。

搜索、AI 与通知类:CometChatSearch(消息与会话搜索)、CometChatAIAssistantChatHistory 与 CometChatAIAssistantTools(AI 助手界面)、CometChatConversationStarter、CometChatSmartReplies、CometChatConversationSummary(AI 建议)、CometChatNotificationFeed(应用内通知流)。

通话类(需 @cometchat/calls-sdk-react-native):CometChatCallButtons(音视频通话触发)、CometChatIncomingCall、CometChatOutgoingCall、CometChatOngoingCall(通话生命周期屏幕)、CometChatCallLogs(通话历史列表,v5 已移除详情视图)。

气泡类:由列表自行渲染,仅在自定义模板中放置,包括文本、图片、视频、音频、文件、语音、贴纸、协作文档、协作白板、会议通话等气泡。

多附件类(RN 独有,React 无对应):CometChatAttachmentPreview、CometChatAttachmentPreviewItem、CometChatAttachmentTile、CometChatAttachmentTray、CometChatAttachmentViewer 及复数气泡(Images/Videos/Audios/FilesBubble)。资料指出这九个均无文档,需从套件源码构建并说明。

此外还列出非组件但公开且关键的项:ChatConfigurator、DataSourceDecorator、CometChatMessageTemplate(自定义消息类型)、CometChatThemeProvider 与 useTheme()、CometChatI18nProvider、CometChatUIEventHandler、CometChatUiKitConstants。以及基础构件:身份类(Avatar、StatusIndicator、Badge、Date)、行外壳(ListItem)、浮层(ActionSheet、BottomSheet、ConfirmDialog、ReportDialog、MediaViewer)、输入附加项(EmojiKeyboard、MediaRecorder、InlineAudioRecorder、CreatePoll、SuggestionList、MessagePreview、MessageComposerAction、MessageOption)、表情回应(Reactions、QuickReactions、ReactionList)、文本格式化器(TextFormatter、MentionsFormatter、UrlsFormatter、RichTextFormatter)、辅助类(CometChatUIKit、CometChatUIKitHelper、CometChatSoundManager)。修改用户自身头像/名称不是组件,而是 SDK 调用 CometChat.updateCurrentUserDetails()。

使用方式

自定义 UI 应放入组件的视图插槽(slot)内,而非叠加在组件之上,这样组件能保留自身布局、滚动和空/错误状态。将兄弟元素堆叠在列表上方是典型错误,会导致头部重复渲染并破坏滚动。RN 的插槽属性使用 PascalCase(React 为 camelCase),移植的代码片段若用错大小写会被静默忽略。各组件插槽不同,例如 CometChatConversations 提供 ItemView、TitleView、SubtitleView、LeadingView、TrailingView、SearchView、EmptyView、ErrorView、LoadingView;CometChatMessageHeader 提供 ItemView、TitleView、SubtitleView、LeadingView、TrailingView、AuxiliaryButtonView;CometChatMessageList 提供 HeaderView、FooterView、EmptyView、ErrorView、LoadingView;CometChatMessageComposer 提供 HeaderView、SendButtonView、AuxiliaryButtonView、CustomView。应查阅具体组件文档页获取准确插槽列表,而非从同类组件复制。

适用场景

适用于基于 CometChat React Native UI Kit v5 构建聊天界面时选择组件、定制列表行/头部/气泡、确认组件是否存在等开发场景。

限制

v5 中不存在的组件包括:CometChatErrorBoundary、CometChatDetails、CometChatAddMembers、CometChatBannedMembers、CometChatTransferOwnership、CometChatContacts、所有 *WithMessages 复合组件、CometChatCallLogDetails/History/Participants/Recordings,它们已在套件 v5 中移除,各自有 SDK 回退路径,但封禁成员没有任何 UI 界面,若应用需要封禁功能还须自行接入查看与解封。CometChatGroupMembers 仅列出活跃成员,不含被封禁用户。气泡组件不应直接放置,列表会自行渲染,需通过模板自定义。验证方式:每个输出的组件都应出现在 catalogs/rn-v5.json 中,npm run verify:fences:rn-v5 通过,并在设备上确认自定义插槽内容渲染在组件内部且列表仍可滚动。