如何在 react-native-gifted-chat 中发送图像？

Question

我想像发送文本一样在 react-Native-Gifted-chat 中发送图像。我是react-native的新手

我已经使用 react-native-image-picker 从物理设备中选择图像，现在我无法在 message[] 中渲染图像。

Answer 1

您可以以对象为参数调用GiftedChat的onSend方法。只需传递一个以图像为键的对象。例如

onSend({ image: "https://picsum.photos/id/237/200/300" });

Answer 2

你可以用这个从 'react-native-document-picker';

导入 DocumentPicker

先安装这个库

然后只需从文档选择器中选择文件使用这个功能

onAttatchFile = async () => { 尝试 { const res = await DocumentPicker.pick({ 输入：[DocumentPicker.types.allFiles], });

   // console.log(res);
   let type = res.name.slice(res.name.lastIndexOf('.') + 1);
   if (
     res.type == 'doc' ||
     res.type == 'application/pdf' ||
     res.type == 'image/jpeg' ||
     res.type == 'image/png' ||
     res.type == 'image/jpg' ||
     res.type == 'application/msword' ||
     type == 'docx'
   ) {
     this.setState({slectedFile: res}, () => this.onSendWithImage());
   } else {
     alert(`${type} files not allowed`);
   }
 } catch (err) {
   //Handling any exception (If any)
   if (DocumentPicker.isCancel(err)) {
     //If user canceled the document selection
     // alert('Canceled from single doc picker');
   } else {
     //For Unknown Error
     // alert('Unknown Error: ' + JSON.stringify(err));
     throw err;
   }
 }

};

发送图片时使用此功能

  onSendWithImage() {

 let imageData = {
   name: this.state.slectedFile.name,
   type: this.state.slectedFile.type,
   size: this.state.slectedFile.size,
   uri: this.state.slectedFile.uri,
 };
 var formData = new FormData();
 formData.append('type', 2);
 formData.append('senderId', this.state.senderData.id),
 formData.append('recieverId', this.state.reciverData._id),
 formData.append('message', imageData);


 post('sendMessage', formData).then(res =>

    res.success ? this.msjSendSuccess(res) : this.msjSendFailure(res),
 );

}

与你的后端交谈并告诉他/她发送图像密钥中的图像
完全享受 React native

如何在 react-native-gifted-chat 中发送图像？

How can I send image in react-native-gifted-chat?

react-native

react-native-image-picker

react-native-gifted-chat