React Native使用ExcelJS库导出Excel时进程卡住问题求助

问题分析 #

从现象来看，导出流程卡在setTimeout的回调执行前——控制台仅输出Export started，但Processing data...等后续日志从未出现。核心可能原因有两点：

1. setTimeout(0)的调度阻塞：React Native的JS线程调度机制中，setTimeout(0)并不能保证立即执行，若setLoading(true)触发的UI更新占用了JS线程，会导致回调被延迟甚至挂起。
2. ExcelJS在RN环境的兼容性问题：ExcelJS原本为浏览器/Node.js设计，其writeBuffer等API在React Native中可能存在线程阻塞或环境不兼容问题，导致流程卡死在导出逻辑的初始阶段。

解决方案 #

1. 移除不必要的setTimeout，直接使用异步事件处理函数 #

将handleExport改为async函数，避免依赖setTimeout的调度：

const handleExport = async () => {
    setLoading(true);
    console.log('Export started');

    try {
        console.log('Processing data...');
        const allData = sampleData;
        console.log('Data processed. Starting export...');
        
        const filePath = await exportToExcel(allData);
        console.log('Export completed');

        if (filePath) {
            console.log('File exported successfully:', filePath);
            Alert.alert('Success', 'File exported successfully', [
                { text: 'Open', onPress: () => openFile(filePath) },
                { text: 'OK', style: 'cancel' },
            ]);
        } else {
            console.log('Export failed: File path is null');
            Alert.alert('Error', 'Failed to export file');
        }
    } catch (error) {
        console.log('Export failed with error:', error);
        Alert.alert('Error', `An error occurred: ${error.message}`);
    } finally {
        setLoading(false);
        console.log('Loading stopped');
    }
};

2. 替换ExcelJS为更适配RN的SheetJS（xlsx） #

ExcelJS在RN环境中易出现线程阻塞问题，改用SheetJS（xlsx库）实现导出逻辑：
首先安装依赖：

npm install xlsx react-native-fs

修改导出逻辑代码：

import XLSX from 'xlsx';
import * as RNFS from 'react-native-fs';
import { Alert } from 'react-native';

export const exportToExcel = async (data) => {
    const workbook = XLSX.utils.book_new();

    // 处理Datos工作表
    const datosSheet = XLSX.utils.json_to_sheet(data.Datos);
    XLSX.utils.book_append_sheet(workbook, datosSheet, 'Datos');

    // 处理Superficies工作表
    const superficiesSheet = XLSX.utils.aoa_to_sheet(data.Superficies);
    XLSX.utils.book_append_sheet(workbook, superficiesSheet, 'Superficies');

    // 处理Huecos工作表
    const huecosSheet = XLSX.utils.json_to_sheet(data.Huecos);
    XLSX.utils.book_append_sheet(workbook, huecosSheet, 'Huecos');

    // 生成文件并保存
    const buffer = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' });
    const filePath = `${RNFS.DocumentDirectoryPath}/TestData.xlsx`;

    try {
        await RNFS.writeFile(filePath, buffer.toString('base64'), 'base64');
        console.log('File saved successfully at:', filePath);
        return filePath;
    } catch (error) {
        console.error('Error saving file', error);
        return null;
    }
};

3. 额外排查步骤 #

• 确认react-native-fs已正确安装并链接（RN 0.60+自动链接，无需手动操作）；
• 检查Android端的文件权限：若后续需要访问外部存储，需在AndroidManifest.xml中添加<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>；
• 开启RN性能监视器（Cmd+D/Ctrl+M打开开发者菜单 → Show Perf Monitor），查看JS线程帧率是否被阻塞，确认导出逻辑是否占用过多线程资源。

内容的提问来源于stack exchange，提问作者Alex Tiribeja