React Native技术问题：如何调用原生阅读器打开应用内本地PDF

嘿，我完全懂你想要的那种原生体验——不想折腾WebView的样式，直接调用系统自带的PDF阅读器打开本地文件对吧？刚好我之前也遇到过这个问题，下面给你一步步讲怎么实现：

1. 先把本地PDF文件放对位置 #

• iOS端：把你的PDF文件直接拖进Xcode的项目结构里，记得勾选对应的App Target，这样它会被打包进App的Bundle里。
• Android端：在android/app/src/main目录下新建assets文件夹（如果没有的话），然后把PDF文件放进去就行。

2. 获取本地文件的绝对路径并唤起阅读器 #

直接用相对路径调用Linking.openURL是不行的，系统找不到文件。我们需要先拿到文件的绝对URI，这里推荐用react-native-fs这个轻量库来处理文件路径（先执行npm install react-native-fs --save安装它）。

下面是完整的代码示例：

import RNFS from 'react-native-fs';
import { Linking, TouchableOpacity, Text, Platform } from 'react-native';

const openLocalPDF = async () => {
  let filePath;

  if (Platform.OS === 'ios') {
    // iOS下直接获取Bundle里的文件路径
    filePath = `${RNFS.MainBundlePath}/your-local-file.pdf`;
  } else {
    // Android的Assets目录是只读的，得先复制到可读写目录
    const destPath = `${RNFS.DocumentDirectoryPath}/your-local-file.pdf`;
    // 先检查文件是否已经复制过，避免重复操作
    const fileExists = await RNFS.exists(destPath);
    if (!fileExists) {
      await RNFS.copyFileAssets('your-local-file.pdf', destPath);
    }
    filePath = destPath;
  }

  // 生成系统能识别的文件URI
  const fileUri = `file://${filePath}`;
  // 先检查系统是否支持打开这个URI
  const isSupported = await Linking.canOpenURL(fileUri);

  if (isSupported) {
    await Linking.openURL(fileUri);
  } else {
    console.error('无法打开该PDF，请检查文件名和路径是否正确！');
  }
};

// 你的按钮组件
const LocalPDFButton = () => (
  <TouchableOpacity onPress={openLocalPDF}>
    <Text>查看本地PDF</Text>
  </TouchableOpacity>
);

export default LocalPDFButton;

3. 几个关键注意点 #

• 文件名要准确：不管iOS还是Android，文件名的大小写、后缀都要和代码里写的完全一致，不然会找不到文件。
• Android的特殊处理：因为Assets目录是只读的，原生阅读器没法直接访问，所以必须先把文件复制到应用的可读写目录（比如DocumentDirectoryPath）。
• 测试前重新打包：添加PDF文件后，记得重新打包App（iOS用Xcode编译，Android执行./gradlew assembleDebug），确保文件被正确打包进去。

如果不想用第三方库，iOS也可以通过原生桥接来获取Bundle文件路径，但react-native-fs已经帮我们封装好了，用起来更省心。

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