如何在React Native中读取iOS设备Excel表格特定行列数据并展示？

步骤1：安装必要依赖 #

首先安装Excel解析库xlsx和文件读取库react-native-fs：

npm install xlsx react-native-fs
# 或使用yarn
yarn add xlsx react-native-fs

步骤2：读取并解析Excel文件 #

假设你已经通过文件选择器获取到Excel文件的uri，接下来可以通过以下代码读取并解析文件内容：

import XLSX from 'xlsx';
import RNFS from 'react-native-fs';
import { useState, FlatList, View, Text } from 'react-native';

// 解析Excel文件的核心函数
const parseExcel = async (fileUri) => {
  // 将文件读取为base64格式（xlsx库支持这种格式解析）
  const base64Content = await RNFS.readFile(fileUri, 'base64');
  
  // 解析Excel工作簿
  const workbook = XLSX.read(base64Content, { type: 'base64' });
  
  // 获取第一个工作表（可根据需求指定其他表名，比如workbook.SheetNames[1]）
  const targetSheet = workbook.Sheets[workbook.SheetNames[0]];
  
  // 方式1：按行列索引提取（跳过表头行，取第2列和第4列）
  // header: 1 表示将表格数据转为二维数组，第一行是表头
  const rawData = XLSX.utils.sheet_to_json(targetSheet, { header: 1 });
  // 跳过表头，提取指定列
  const filteredData = rawData.slice(1).map(row => ({
    column2: row[1],
    column4: row[3]
  })).filter(item => item.column2 && item.column4); // 过滤空条目

  // 方式2：按表头名称提取（比如表头包含"姓名"、"年龄"列）
  // const rawDataWithHeaders = XLSX.utils.sheet_to_json(targetSheet);
  // const filteredData = rawDataWithHeaders.map(row => ({
  //   name: row['姓名'],
  //   age: row['年龄']
  // })).filter(item => item.name && item.age);

  return filteredData;
};

步骤3：用FlatList展示提取的数据 #

在组件中调用解析函数，将处理后的数据传入FlatList展示：

const ExcelDataViewer = () => {
  const [displayData, setDisplayData] = useState([]);

  // 文件选择后的回调函数（替换成你实际的文件选择逻辑）
  const onFileSelected = async (selectedFileUri) => {
    const parsedData = await parseExcel(selectedFileUri);
    setDisplayData(parsedData);
  };

  return (
    <FlatList
      data={displayData}
      keyExtractor={(item, idx) => idx.toString()}
      renderItem={({ item }) => (
        <View style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: '#e0e0e0' }}>
          <Text style={{ fontSize: 16, marginBottom: 4 }}>列2内容：{item.column2}</Text>
          <Text style={{ fontSize: 16 }}>列4内容：{item.column4}</Text>
          {/* 如果用方式2，替换为：
          <Text>姓名：{item.name}</Text>
          <Text>年龄：{item.age}</Text>
          */}
        </View>
      )}
    />
  );
};

export default ExcelDataViewer;

注意事项 #

• 若Excel包含多个工作表，可通过workbook.SheetNames获取所有表名，指定目标表进行解析。
• iOS端需确保已配置文件访问权限：在Info.plist中添加对应的权限描述，比如NSDocumentsFolderUsageDescription（访问文档目录）或NSFileProviderDomainUsageDescription（访问第三方文件）。
• 如果解析大文件，建议添加加载状态提示，避免界面卡顿。

内容的提问来源于stack exchange，提问作者civani mahida