用 React Native 实现聊天 App 如何发送图片

一、前言

本文分享了通过 React Native 实现的聊天室如何发送图片。

二、如何发送图片

React Native 实现的聊天室发送图片需要通过第三方插件来实现从相册选择图片或拍照功能。

插件选择

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

npm install react-native-image-picker --save

从相册选择图片

import {launchImageLibrary} from 'react-native-image-picker';
 
// 选择图片
launchImageLibrary({
  mediaType: 'photo',
  selectionLimit: 1,
}).then((result) => {
 const file = result.assets[0];
 // 图片资源信息
 console.log(file);
});

手机拍照

import {launchCamera} from 'react-native-image-picker';
// 1. 拍照
launchCamera({
  mediaType: 'photo',
  cameraType: 'back',
}).then((result) => {
 const file = result.assets[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>