如何使用react-native-webview打开本地文件

Question

无法使用react-native-webview

打开本地文件

我目前正在尝试在我的 React Native 应用程序中的react-native-webview 中打开本地文件。该文件位于应用程序的内部目录中，特别是 FileSystem.documentDirectory 中。我尝试使用 WebView 组件，并将 source 属性设置为文件的 URI，但它似乎没有按预期工作。

这是我正在使用的代码片段：

import React from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import * as FileSystem from 'expo-file-system';

const App = () => {
  const fileName = 'file.pdf';
  const fileUri = `${FileSystem.documentDirectory}${fileName}`;

  return (
    <View style={{ flex: 1 }}>
      <WebView style={{ flex: 1 }} source={{ uri: fileUri }} />
    </View>
  );
};

export default App;

但是，当我运行应用程序时，出现错误或 WebView 显示空白屏幕。我已确保文件 file.pdf 存在于正确的位置。

我是否遗漏了什么，或者我应该采取不同的方法来使用react-native-webview 打开本地文件？任何帮助将不胜感激。谢谢！