SuperAPI AI 工具集

cometchat-native-placement

前端与建站

查看项目

更新于 10-16 05:03

技能介绍

用途:本技能用于指导在 React Native 应用中决定聊天界面的放置位置,覆盖五种典型模式,并说明每种模式的组件组合、导航接线与平台注意事项。资料强调使用前应先阅读 cometchat-native-core 与 cometchat-native-components,因为 provider 包装链与组件目录是前置条件。

五种放置模式:一、Stack 屏幕,通过 @react-navigation/native-stack 推入独立聊天页,含会话列表到消息页的双屏模式,以及已知目标用户或群组的单会话模式;二、底部标签,适用于带 Chats、Users、Groups、Calls 等多入口的完整信使,消息页放在标签导航之外以全屏呈现,Calls 标签依赖 @cometchat/calls-sdk-react-native;三、Modal,用于非主导航的偶发聊天,可用 react-navigation 的 presentation: "modal" 或 React Native 的 Modal 组件;四、BottomSheet,用于从父屏幕上滑唤起的分段式聊天,可选 @gorhom/bottom-sheet 或库自带的 CometChatBottomSheet;五、Embedded,将聊天组件嵌入现有屏幕布局内。

主要能力:为每种模式指定 CometChatMessageHeader、CometChatMessageList、CometChatMessageComposer 等组件的组合方式,并给出导航接线要点。注意事项包括:Stack.Navigator 必须包在 NavigationContainer 中;不要在外层再包 KeyboardAvoidingView,键盘避让由 Composer 的 keyboardAvoidingViewProps 处理;BottomSheet 的 snapPoints 必须用 useMemo 记忆化;@gorhom/bottom-sheet 需配合 keyboardBehavior 与 GestureHandlerRootView;Embedded 需设置固定高度并处理键盘点击。

适用场景:即时通讯类应用、含聊天功能的产品、客服或一对一支持、带通话与群组入口的完整信使、偶发聊天弹层、上下文评论以及嵌入现有页面的聊天区域。

限制:资料未提供具体版本要求、收费与价格信息;部分细节如 Modal 的原生平台差异、BottomSheet 手势处理等需结合项目实际验证。