如何在React Native中将CSV文件显示为链接并实现点击下载

以下是两种生产环境常用的稳定实现方案：

方案1：原生RN项目使用 react-native-fs 实现（全平台兼容） #

无需后端服务，直接读取本地打包的assets资源导出到公共存储目录

• 首先安装依赖：

  npm install react-native-fs --save
  # iOS项目执行后续操作
  cd ios && pod install && cd ..
  

• 资源放置要求：
  • 安卓：将CSV模板放入 android/app/src/main/assets/ 目录，不存在则手动新建
  • iOS：将CSV模板拖入Xcode项目，勾选对应Target，确保文件出现在「Build Phases → Copy Bundle Resources」列表中
• 核心实现代码：

  import RNFS from 'react-native-fs';
  import { Alert, PermissionsAndroid, Platform, TouchableOpacity, Text } from 'react-native';
  
  const downloadCsvTemplate = async () => {
    // 对应assets中的模板文件路径
    const assetFilePath = Platform.OS === 'ios' 
      ? `${RNFS.MainBundlePath}/template.csv` 
      : 'template.csv';
    // 导出到设备公共下载目录的路径
    const outputPath = `${RNFS.DownloadDirectoryPath}/数据导入模板.csv`;
  
    try {
      // 安卓存储权限适配
      if (Platform.OS === 'android') {
        const permission = Platform.Version >= 33 
          ? PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS 
          : PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
        const grantResult = await PermissionsAndroid.request(permission);
        if (grantResult !== PermissionsAndroid.RESULTS.GRANTED) {
          Alert.alert('权限不足', '请授予存储权限后重试');
          return;
        }
      }
      // 从应用资产复制到公共目录
      await RNFS.copyFileAssets(assetFilePath, outputPath);
      Alert.alert('下载完成', `模板已保存至下载目录，文件名：数据导入模板.csv`);
    } catch (error) {
      console.error('模板下载失败：', error);
      Alert.alert('下载失败', '请检查资源配置后重试');
    }
  };
  
  // UI层绑定点击事件
  const DownloadLink = () => (
    <TouchableOpacity onPress={downloadCsvTemplate}>
      <Text style={{color: '#2563eb', textDecorationLine: 'underline'}}>
        点击下载CSV导入模板
      </Text>
    </TouchableOpacity>
  );
  
  export default DownloadLink;
  

方案2：Expo项目使用 expo-file-system 实现 #

无需修改原生配置，直接调用Expo官方封装的接口

• 安装依赖：

  npx expo install expo-file-system expo-media-library
  

• 核心实现代码：

  import * as FileSystem from 'expo-file-system';
  import * as MediaLibrary from 'expo-media-library';
  import { Alert, TouchableOpacity, Text } from 'react-native';
  
  const downloadCsvTemplate = async () => {
    const { status } = await MediaLibrary.requestPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('权限不足', '请授予媒体库权限后重试');
      return;
    }
    try {
      const assetUri = `${FileSystem.bundleDirectory}assets/template.csv`;
      const outputUri = `${FileSystem.documentDirectory}数据导入模板.csv`;
      await FileSystem.copyAsync({ from: assetUri, to: outputUri });
      await MediaLibrary.createAssetAsync(outputUri);
      Alert.alert('下载完成', '模板已保存至设备相册/下载目录');
    } catch (error) {
      console.error('模板下载失败：', error);
      Alert.alert('下载失败', '请检查资源配置后重试');
    }
  };
  
  const DownloadLink = () => (
    <TouchableOpacity onPress={downloadCsvTemplate}>
      <Text style={{color: '#2563eb', textDecorationLine: 'underline'}}>
        点击下载CSV导入模板
      </Text>
    </TouchableOpacity>
  );
  
  export default DownloadLink;
  

补充说明：如果需要支持用户直接分享模板而不是仅保存到本地，可以在文件导出完成后调用Linking.openURL(本地文件URI)唤起系统默认的文件操作菜单，支持用户选择保存、分享、打开等操作。

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