如何解决react-native-webview无法打开React Native本地文件的问题

安全阿岳

2026-7-14

解决react-native-webview无法打开本地文件的问题

react-native-webview直接加载file://协议的本地文件时，常会因平台权限限制或WebView安全策略导致空白或报错，以下是几种可行的解决方案：

方案1：配置WebView权限属性

针对Android平台，需显式开启文件访问权限，添加以下props即可：

<WebView
  style={{ flex: 1 }}
  source={{ uri: fileUri }}
  allowFileAccess={true}
  allowFileAccessFromFileURLs={true}
  allowUniversalAccessFromFileURLs={true}
/>

iOS平台在Expo环境下无需额外配置，裸项目若有问题可在Info.plist中添加文件访问相关的权限例外。

方案2：转Base64格式加载

将本地文件读取为Base64编码，通过data URI加载，避开file://的权限限制：

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

const App = () => {
  const [fileBase64, setFileBase64] = useState(null);
  const fileName = 'file.pdf';
  const fileUri = `${FileSystem.documentDirectory}${fileName}`;

  useEffect(() => {
    const loadFile = async () => {
      const base64 = await FileSystem.readAsStringAsync(fileUri, {
        encoding: FileSystem.EncodingType.Base64,
      });
      setFileBase64(`data:application/pdf;base64,${base64}`);
    };
    loadFile();
  }, []);

  if (!fileBase64) return <View />;

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

export default App;

方案3：通过本地HTML嵌入文件

生成简易HTML页面，用embed标签嵌入本地文件，配合权限配置解决加载问题：

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

const App = () => {
  const [htmlContent, setHtmlContent] = useState(null);
  const fileName = 'file.pdf';
  const fileUri = `${FileSystem.documentDirectory}${fileName}`;

  useEffect(() => {
    const html = `
      <html>
        <body style="margin:0">
          <embed 
            src="${fileUri}" 
            type="application/pdf" 
            width="100%" 
            height="100%"
          />
        </body>
      </html>
    `;
    setHtmlContent(html);
  }, []);

  if (!htmlContent) return <View />;

  return (
    <View style={{ flex: 1 }}>
      <WebView 
        style={{ flex: 1 }} 
        source={{ html: htmlContent }}
        allowFileAccess={true}
        allowFileAccessFromFileURLs={true}
      />
    </View>
  );
};

export default App;

额外注意事项

先通过FileSystem.getInfoAsync(fileUri)验证文件是否存在、路径是否正确；
部分Android设备的WebView可能不支持内置PDF渲染，这种情况下建议使用专门的PDF处理库（如react-native-pdf）配合Expo的文件系统能力实现。

内容的提问来源于stack exchange，提问作者Василий Пенькевич

如何解决react-native-webview无法打开React Native本地文件的问题

方案1：配置WebView权限属性 #

方案2：转Base64格式加载 #

方案3：通过本地HTML嵌入文件 #

额外注意事项 #

方案1：配置WebView权限属性

方案2：转Base64格式加载

方案3：通过本地HTML嵌入文件

额外注意事项