使用Expo时react-native-fs报RNFSFileTypeRegular为null错误求助

问题描述 #

开发React Native项目时使用Expo打包工具，遇到以下错误：

TypeError: Cannot read property 'RNFSFileTypeRegular' of null, js engine: hermes

依赖配置（package.json） #

"dependencies": {
  "@expo/vector-icons": "^14.0.2",
  "@react-navigation/native": "^6.0.2",
  "expo": "~51.0.23",
  "expo-constants": "~16.0.2",
  "expo-font": "~12.0.9",
  "expo-linking": "~6.3.1",
  "expo-router": "~3.5.19",
  "expo-splash-screen": "~0.27.5",
  "expo-status-bar": "~1.12.1",
  "expo-system-ui": "~3.0.7",
  "expo-web-browser": "~13.0.3",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-native": "0.74.3",
  "react-native-fs": "^2.20.0",
  "react-native-gesture-handler": "~2.16.1",
  "react-native-reanimated": "~3.10.1",
  "react-native-reanimated-carousel": "^3.5.1",
  "react-native-safe-area-context": "4.10.5",
  "react-native-screens": "3.31.1",
  "react-native-web": "~0.19.10"
},

相关代码 #

GettingStarted.jsx #

import { View, Text } from 'react-native'
import React, { useState } from 'react'
import RNFS from 'react-native-fs'
import Carousel from 'react-native-reanimated-carousel'

export default function GettingStarted() {
  const [file, setFile] = useState([]);
  const dir = `${RNFS.PicturesDirectoryPath}social/assets/Img`
  const imgUrl = async () => {
    try {
      const exist = await RNFS.exists(dir)
      if (exist) {
        console.log("Directory Exist", dir);
      }
    } catch (error) {
      console.error('Error reading subdirectory:', error);
    }
  }
  imgUrl()
  return (
    <View>
      <Carousel >

      </Carousel>
    </View>
  )
}

Index.tsx #

import { Text, View } from "react-native";
import GettingStarted from '@/app/(auth)/gettingStarted'

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <GettingStarted></GettingStarted>
    </View>
  );
}

原因分析 #

• react-native-fs是纯原生模块，Expo Go环境仅支持Expo官方预配置的库，未经过Expo适配的原生模块无法在Expo Go中初始化，会导致RNFS对象为null，访问其属性时触发错误。
• 你的项目使用Expo管理，但未通过预构建生成原生代码，直接使用react-native-fs会出现模块加载失败的问题。

解决方法 #

方案1：替换为Expo官方文件系统库（推荐） #

使用expo-file-system替代react-native-fs，这是Expo官方支持的库，无需原生配置，直接兼容Expo Go。

1. 安装依赖：

npx expo install expo-file-system

2. 修改GettingStarted.jsx代码：

import { View, Text } from 'react-native'
import React, { useState } from 'react'
import * as FileSystem from 'expo-file-system'
import Carousel from 'react-native-reanimated-carousel'

export default function GettingStarted() {
  const [file, setFile] = useState([]);
  // 使用Expo的文档目录作为基础路径
  const dir = `${FileSystem.documentDirectory}social/assets/Img`
  const imgUrl = async () => {
    try {
      const dirInfo = await FileSystem.getInfoAsync(dir)
      if (dirInfo.exists) {
        console.log("Directory Exist", dir);
      }
    } catch (error) {
      console.error('Error reading subdirectory:', error);
    }
  }
  
  imgUrl()
  
  return (
    <View>
      <Carousel />
    </View>
  )
}

说明：expo-file-system的API逻辑和react-native-fs类似，仅部分方法名和路径有差异，比如用getInfoAsync替代exists，documentDirectory是Expo提供的标准文件目录路径。

方案2：预构建项目并使用自定义开发客户端 #

如果必须使用react-native-fs，需要生成原生代码并构建自定义Expo客户端：

1. 预构建项目，生成iOS/Android原生代码：

npx expo prebuild

2. 安装react-native-fs的原生依赖（预构建会自动处理）

3. 使用EAS Build构建自定义开发客户端：

npx eas build --profile development

4. 安装并使用构建好的自定义客户端测试项目，此时react-native-fs可以正常初始化运行。

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