用 React Native 实现聊天 App 如何发送文件

一、前言

本文分享了通过 React Native 实现的聊天 App 中如何发送文件。

二、选择文件

React Native 实现的聊天 App 中发送文件需要通过第三方插件来实现文件选择功能。

插件选择

推荐使用 react-native-document-picker。

npm install react-native-document-picker --save

选择文件

import DocumentPicker from 'react-native-document-picker';
 
// 1. 选择文件
DocumentPicker.pick({
  type: [DocumentPicker.types.allFiles],
}).then((result) => {
 const file = result[0];
 // 文件资源信息
 console.log(file);
});

获取设备权限

Android

在 android 目录下，找到 app/src/main/AndroidManifest.xml ，添加以下权限：

 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

iOS

在 ios 目录下找到 Info.plist ，添加以下权限：

<key>NSCameraUsageDescription</key>
<string>我们需要访问您的相机以拍摄照片</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要访问您的相册以选择照片</string>