如何在react原生天才聊天中发送图片

Question

我想在react Native Gifted聊天中发送图像，就像发送文本一样。我是反应母语的新手。

我已经使用react原生图像选择器从物理设备中拾取图像，现在我无法在消息[]中渲染图像。

Answer 1

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

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

Answer 2

您可以使用从"react native document picker"导入DocumentPicker；

1. 首先安装此库

2. 然后简单地从文档选择器中选择文件使用此功能

   onAttatchFile=async((=>{尝试{const res=等待DocumentPicker.pick({type:[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;
   }
   }
   

   }；

3. 当你想发送图像时使用这个功能

   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),
   );
   

   }

4. 与你的后台交谈，并对他/她说要发送图像密钥中的图像

5. 完全享受React原生