SuperAPI AI 工具集

expo-chat-ui

编程与开发

查看项目

更新于 10-15 21:39

技能介绍

用途:在 Expo 应用中构建高性能、生产级聊天界面,统一处理键盘交互、消息列表与多平台差异。

主要能力:流畅的键盘动画与交互式收起;基于 @legendapp/list 的高性能回收消息列表;安全区域与 inset 管理;原生 SwiftUI 与 Web HTML 的平台特定实现;图片附件;语音识别;触觉反馈。

依赖安装:npx expo install react-native-reanimated react-native-safe-area-context react-native-keyboard-controller @legendapp/list @react-native-masked-view/masked-view expo-haptics expo-speech-recognition expo-glass-effect @expo/ui

架构:components/ 下含 keyboard-scroll-view.tsx(ChatView 包装与键盘处理)、measure-node.tsx(高度测量上下文)、composer/(composer.tsx 原生实现、composer.web.tsx Web 实现、composer-text-input.tsx、send-button.tsx 发送/麦克风/停止状态、multi-button.tsx 附件菜单、selected-media-context.tsx 图片附件状态)、lib/(haptic.ts 原生触觉、haptic.web.ts Web 空实现)。

使用方式:ChatView 通过 MeasureNode 提供工具栏高度测量与键盘动画协调,支持 ChatView.Toolbar 与 ChatView.ScrollView 子组件;使用 useKeyboardAnimation 钩子处理键盘生命周期事件;工具栏用 ChatViewToolbarPadding 定位到键盘上方;列表使用 ChatScrollView 包装 LegendList,带 requestScrollToEnd 与滚动指示器 inset;输入框原生实现基于 @expo/ui/swift-ui;发送按钮根据录制、可发送、思考中三态切换;图片附件通过 SelectedMediaContext 管理最多 3 张并支持预览删除。

限制:资料未提供收费、价格、平台覆盖范围、性能指标或完整使用步骤,部分代码示例被截断;具体兼容性与版本要求暂未提供。