时间戳

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

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

问题描述

我想在使用 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,
            }}
          />

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

标签： androidiosfirebasereact-nativereact-native-gifted-chat

解决方案

天才聊天本身具有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}
                />

推荐阅读