请教：如何在React Native的Gifted Chat组件中添加相机Widget？

核心思路 #

Gifted Chat原生支持自定义输入区域，我们可以通过重写renderInputToolbar方法，在默认输入框旁插入相机按钮，搭配React Native相机/图片选择库实现拍照并发送图片消息的功能。

具体实现步骤 #

• 安装依赖
  先安装必要的依赖库：

  # 安装Gifted Chat和图片选择工具
  npm install react-native-gifted-chat react-native-image-picker
  # 或使用yarn
  yarn add react-native-gifted-chat react-native-image-picker
  

  同时配置平台权限：

  • iOS：在Info.plist中添加NSCameraUsageDescription和NSPhotoLibraryUsageDescription的权限说明文本
  • Android：在AndroidManifest.xml中添加<uses-permission android:name="android.permission.CAMERA" />和<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

• 自定义输入工具栏
  重写Gifted Chat的输入工具栏，加入相机按钮及触发逻辑：

  import { GiftedChat, InputToolbar } from 'react-native-gifted-chat';
  import { TouchableOpacity, Image, Alert } from 'react-native';
  import { launchCamera } from 'react-native-image-picker';
  
  const CustomInputToolbar = (props) => {
    const handleCameraTap = async () => {
      const cameraOptions = {
        mediaType: 'photo',
        quality: 0.7,
        maxWidth: 800,
        maxHeight: 800,
      };
  
      try {
        const result = await launchCamera(cameraOptions);
        if (result.didCancel) return;
        if (result.errorCode) {
          Alert.alert('相机错误', result.errorMessage);
          return;
        }
  
        // 构造符合Gifted Chat格式的图片消息
        const imageMsg = {
          _id: Date.now(),
          text: '',
          image: result.assets[0].uri,
          createdAt: new Date(),
          user: {
            _id: 1, // 替换为当前用户ID
            name: '当前用户',
          },
        };
        props.onSend([imageMsg]);
      } catch (err) {
        Alert.alert('出错了', '无法打开相机，请检查权限设置');
      }
    };
  
    return (
      <InputToolbar {...props}>
        <TouchableOpacity onPress={handleCameraTap} style={{ padding: 8, marginRight: 4 }}>
          <Image 
            source={require('./assets/camera-icon.png')} // 替换为你的相机图标资源
            style={{ width: 26, height: 26 }} 
          />
        </TouchableOpacity>
        {props.children}
      </InputToolbar>
    );
  };
  

• 集成到聊天组件
  在你的聊天页面中使用自定义输入工具栏：

  import { useState, useEffect } from 'react';
  import { GiftedChat } from 'react-native-gifted-chat';
  
  const ChatScreen = () => {
    const [messages, setMessages] = useState([]);
  
    useEffect(() => {
      // 初始化历史消息（示例）
      setMessages([
        {
          _id: 1,
          text: '嗨，有什么需要帮忙的？',
          createdAt: new Date(),
          user: {
            _id: 2,
            name: '客服',
          },
        },
      ]);
    }, []);
  
    const handleSend = (newMessages) => {
      setMessages(prevMessages => GiftedChat.append(prevMessages, newMessages));
      // 此处添加消息发送到后端的逻辑
    };
  
    return (
      <GiftedChat
        messages={messages}
        onSend={msgs => handleSend(msgs)}
        user={{ _id: 1 }}
        renderInputToolbar={props => <CustomInputToolbar {...props} />}
      />
    );
  };
  
  export default ChatScreen;
  

实践注意事项 #

• 权限预申请：首次打开相机前，建议主动调用权限申请API，避免被系统拦截导致相机无法打开
• 图片优化：通过quality、maxWidth等参数控制图片大小，减少传输压力
• 异常处理：覆盖用户取消拍照、权限拒绝、相机启动失败等场景，给出清晰提示
• 图标适配：根据不同平台的设计规范调整相机图标的尺寸和样式

内容的提问来源于stack exchange，提问作者roii31