如何在React Native中将react-native-document-picker选中文件读取为字节？

方案1：裸React Native项目（使用react-native-fs） #

步骤1：安装依赖 #

npm install react-native-fs --save

RN 0.60+版本会自动完成原生链接，无需额外操作。

步骤2：读取文件并转换为字节数据 #

import DocumentPicker from 'react-native-document-picker';
import RNFS from 'react-native-fs';

const handleDocumentSelection = useCallback(async () => {
    const file = await DocumentPicker.pick({
        presentationStyle: 'fullScreen',
    });
    
    try {
        // 读取文件内容为base64格式
        const base64Content = await RNFS.readFile(file.uri, 'base64');
        
        // 将base64转换为Uint8Array（字节数组）
        const uint8Array = Uint8Array.from(atob(base64Content), char => char.charCodeAt(0));
        // 如需ArrayBuffer可直接取buffer属性
        const arrayBuffer = uint8Array.buffer;
        
        // 此时uint8Array/arrayBuffer可直接用于WebRTC发送
        console.log('文件字节数据:', uint8Array);
    } catch (error) {
        console.error('读取文件失败:', error);
    }
}, []);

方案2：Expo项目（使用expo-file-system） #

步骤1：安装依赖 #

npx expo install expo-file-system

步骤2：读取文件并转换为字节数据 #

import DocumentPicker from 'react-native-document-picker';
import * as FileSystem from 'expo-file-system';

const handleDocumentSelection = useCallback(async () => {
    const file = await DocumentPicker.pick({
        presentationStyle: 'fullScreen',
    });
    
    try {
        // 读取文件内容为base64格式
        const base64Content = await FileSystem.readAsStringAsync(file.uri, {
            encoding: FileSystem.EncodingType.Base64,
        });
        
        // 将base64转换为Uint8Array（字节数组）
        const uint8Array = Uint8Array.from(atob(base64Content), char => char.charCodeAt(0));
        const arrayBuffer = uint8Array.buffer;
        
        // 用于WebRTC发送
        console.log('文件字节数据:', uint8Array);
    } catch (error) {
        console.error('读取文件失败:', error);
    }
}, []);

注意事项 #

• 权限配置：
  • Android：在AndroidManifest.xml中添加读取存储权限（Android 13+需适配细分权限）：

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <!-- Android 13+ 针对媒体文件 -->
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
    

  • iOS：在Info.plist中添加文件访问说明：

    <key>NSDocumentPickerUsageDescription</key>
    <string>需要访问您的文件以进行WebRTC传输</string>
    

• 格式转换逻辑：通过base64中转是因为文件系统库通常支持base64读取，再通过atob解码后转成字节数组，最终得到WebRTC需要的Uint8Array/ArrayBuffer格式。

内容的提问来源于stack exchange，提问作者Program-Me-Rev