Expo应用中调用第三方应用打开下载文件的实现问题

Hey there, I’ve run into exactly this issue before with Expo apps trying to launch local files, so I can break down why this happens and walk you through both Expo-native workarounds and the native module approach you ended up using.

Why Linking.openURL() fails #

That error you’re seeing (exposed beyond app through Intent.getData()) is rooted in Android’s Strict Mode security policy (introduced in API 24/Android 7.0). Directly using a file:// URI to share your app’s private local files with external apps is blocked—Android prevents apps from exposing sensitive file paths to other applications. Instead, you need to use a secure content:// URI via FileProvider to grant temporary access to the file.

First: Try these Expo-native fixes (no detaching required) #

Before jumping to detaching from Expo, test these managed workflow-compatible approaches:

1. Use expo-file-system + expo-intent-launcher
   Expo’s expo-intent-launcher lets you fire Android Intents directly (the same system that powers app selection dialogs). Pair it with expo-file-system to generate a secure URI:

   import * as FileSystem from 'expo-file-system';
   import * as IntentLauncher from 'expo-intent-launcher';
   
   const openDownloadedFile = async (filePath) => {
     // Get the file's MIME type to match compatible apps
     const fileInfo = await FileSystem.getInfoAsync(filePath, { mime: true });
     const mimeType = fileInfo.mimeType || '*/*';
   
     try {
       // Generate a secure content:// URI instead of file://
       const contentUri = FileSystem.getContentUriAsync(filePath);
       await IntentLauncher.startActivityAsync('android.intent.action.VIEW', {
         data: contentUri,
         type: mimeType,
         flags: 1 // Grants temporary read permission to the target app
       });
     } catch (error) {
       console.error('Failed to open file:', error);
       // Add fallback logic here (e.g., show "no app found" message)
     }
   };
   

   This should bypass the security error for most file types, though behavior can vary across Android versions.

2. Hack with expo-document-picker (reverse approach)
   While expo-document-picker is built for selecting files, you can use it to "import" your downloaded file and trigger the system’s open dialog:

   import * as DocumentPicker from 'expo-document-picker';
   
   const openFileViaPicker = async (filePath) => {
     try {
       const result = await DocumentPicker.getDocumentAsync({
         copyToCacheDirectory: false,
         uri: filePath
       });
       if (result.type === 'success') {
         // The system will automatically prompt to open the file
       }
     } catch (error) {
       console.error(error);
     }
   };
   

   It’s a workaround, but it works for some use cases without detaching.

If you need to detach (Bare Workflow): Build a native module #

If the Expo-native methods don’t work for your use case (like they didn’t for you), here’s how to implement the reliable FileProvider approach natively:

Step 1: Configure FileProvider in Android

1. Add this to your AndroidManifest.xml inside the <application> tag:

   <provider
       android:name="androidx.core.content.FileProvider"
       android:authorities="${applicationId}.fileprovider"
       android:exported="false"
       android:grantUriPermissions="true">
       <meta-data
           android:name="android.support.FILE_PROVIDER_PATHS"
           android:resource="@xml/file_paths" />
   </provider>
   

2. Create a res/xml/file_paths.xml file to define which folders your app can share:

   <?xml version="1.0" encoding="utf-8"?>
   <paths xmlns:android="http://schemas.android.com/apk/res/android">
       <external-files-path name="app_downloads" path="Download/" />
       <!-- Adjust the path to match where your app stores downloaded files -->
   </paths>
   

Step 2: Write the native module

Create a Java class (e.g., FileOpenerModule.java) in your Android project:

import android.content.Intent;
import android.net.Uri;
import androidx.core.content.FileProvider;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.io.File;

public class FileOpenerModule extends ReactContextBaseJavaModule {
    private static final String MODULE_NAME = "FileOpener";

    public FileOpenerModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return MODULE_NAME;
    }

    @ReactMethod
    public void openFile(String filePath) {
        File file = new File(filePath);
        if (!file.exists()) return;

        // Generate secure content URI via FileProvider
        Uri contentUri = FileProvider.getUriForFile(
            getReactApplicationContext(),
            getReactApplicationContext().getPackageName() + ".fileprovider",
            file
        );

        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.setDataAndType(contentUri, getReactApplicationContext().getContentResolver().getType(contentUri));
        intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

        getReactApplicationContext().startActivity(intent);
    }
}

Register the module in MainApplication.java to make it accessible to React Native.

Step 3: Call from React Native

In your JS code, invoke the native module:

import { NativeModules } from 'react-native';
const { FileOpener } = NativeModules;

// Trigger when user selects a downloaded file
FileOpener.openFile('/path/to/your/file.docx');

This will reliably launch the system’s "open with" dialog, just like WhatsApp does, and eliminate the security error entirely.

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