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

问题描述

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

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

解决方法

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

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

,

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

1. 先安装这个库

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

   onAttatchFile = async() => { 尝试 { const res = await DocumentPicker.pick({ 类型：[DocumentPicker.types.allFiles]， });

   let ree = {
       arr1: [1,2,3,4],arr2: [5,6,7,8],arr3: [7,1]
   };
   
   let total = 0;
   for (var key in ree) {
       if (Array.isArray(ree[key])) {
           total += ree[key][ree[key].length - 1];
       }
   }
   console.log(total);

   };

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

      // 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;
      }
    }
   

   }

4. 与您的后端交谈并告诉他/她发送图像密钥中的图像

5. 完全享受 React Native