如何使用渲染操作在 React-native-Gifted-chat 中发送图像/视频和语音消息？

Posted 2023-05-07

【中文标题】如何使用渲染操作在 React-native-Gifted-chat 中发送图像/视频和语音消息？

【英文标题】：How can I send images/video and voice messages in React-native-Gifted-chat using render actions?

【发布时间】：2020-11-28 13:06:16

【问题描述】：

我想在使用 React-native-gifted-chat 和 Firebase 开发的聊天应用程序中发送图像/视频，我如何为他们创建操作并调用该操作以在 firebase 中上传并发送图像/视频？

这是我的代码。

handleSendImage = () => 
    console.log("handleSendImage");
  ;
  renderActions(props) 
    return (
      <Actions
        ...props
        // containerStyle=
        //   width: 70,
        // 
        icon=() => (
          <Icon
            name="camera"
            size=30
            color=colors.btnBg
            font="FontAwesome"
            onPress=this.handleSendImage
          />
        )
        onSend=(args) => console.log(args)
      />
    );
  

      

<GiftedChat
            placeholder="Hey!"
            alwaysShowSend
            messages=messages
            onSend=(newMessage) => this.onSend(this.chatID(), newMessage)
            renderInputToolbar=this.renderInputToolbar
            renderActions=this.renderActions
            user=
              _id: senderId,
              name: senderName,
            
          />

如何点击特定动作并分别发送语音和图像/视频？

【问题讨论】：

你找到解决办法了吗？

是的，@OliverD，能够使用 Actions 进行开发。

@JaydeepPithwa 你能在这里发布解决方案吗？

尝试将您的操作添加到renderActions

【参考方案1】：

天才聊天本身具有 renderActions 属性，因此只需创建自定义操作即可上传图像/视频和语音。

在这里，我附上了用于上传 PDF/Doc 文件等文档的代码。

要上传图片/视频，您只需要更改该包，而不是我使用的文档选择器

const renderActions = (props) => 
    return (
        <Actions
            ...props
            options=
                ['Document']: async (props) => 
                    try 
                        const result = await DocumentPicker.pick(
                            type: [DocumentPicker.types.pdf],
                        );
                       console.log("image file",result)
                     catch (e) 
                        if (DocumentPicker.isCancel(e)) 
                            console.log("User cancelled!")
                         else 
                            throw e;
                        
                    

                ,
                Cancel: (props) =>  console.log("Cancel") 
            
            onSend=args => console.log(args)
        />
    )
;

天才聊天组件

                   <GiftedChat
                    messages=messages
                    showAvatarForEveryMessage=true
                    onSend=messages => onSend(messages)
                    renderActions=() => renderActions()
                    user=
                        _id: 2,
                        name: 'React Native',
                        avatar: 'https://placeimg.com/140/140/any',
                    
                    renderCustomView=renderCustomView
                />