如何使用ComPDFKit PDF SDK for ReactNative 与Expo ​

Expo 是一个显著简化了开发、构建和测试 React Native 应用的 React Native 平台。

但 Expo 有一个主要的缺点，那就是它默认仅针对 JavaScript 进行优化。开发者需要额外步骤才能使用任何依赖于原生代码的包。原生代码甚至不在初始设置的项目中。为了能够在相应平台上运行，需要使用 Expo Go 应用来提供必要的平台基础。

ComPDFKit ReactNative SDK 是在现有的 ComPDFKit Android 和 iOS SDK 之上实现的。这意味着它不能在运行在 Expo Go 应用中的项目中使用。

在这份指南中，将指导您如何通过设置使用Expo应用程序服务(EAS)的开发构建为Expo项目添加原生模块支持，以便使用ComPDFKit ReactNative包。

前提条件 ​

要开始，请设置您的环境，如果您尚未安装以下工具，请安装它们：

• Android Studio
• Xcode
• Expo CLI
• EAS CLI

创建Expo项目 ​

您将从创建一个可以在 Expo Go 中运行的普通 Expo 项目开始。如果您是 Expo 的新手，建议您熟悉官方的 Expo 文档。

使用以下命令创建新项目

npx create-expo-app compdfkit_expo

[!NOTE] 这个示例中，项目被命名为compdfkit_expo，您也可以将其更改为您喜欢的名称。

使用以下命令安装项目中的软件包

npm install
// or
yarn install

通过运行npx expo start来启动应用程序，以测试您的应用是否正确设置。

生产构建 ​

如果你正在使用生产环境的构建配置，并且本地无法访问应用程序的 iOS 和 Android 文件夹，你可以使用 Expo BuildProperties 插件 来配置 ComPDFKit ReactNative SDK 所需的构建属性。

运行以下命令：

npx expo install expo-build-properties

在你的 app.json 文件中使用以下插件配置：

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "compileSdkVersion": 35,
            "minSdkVersion": 24
          },
          "ios": {
            "deploymentTarget": "15.1"
          }
        }
      ]
    ]
  }
}

ComPDFKit SDK 许可证与项目ApplicationID绑定，请提前修改创建的项目ApplicationID，在您的app.json文件中新增以下代码：

{
  "expo": {
    "ios": {
      "supportsTablet": true,
+      "bundleIdentifier": "com.compdfkit.reactnative.example"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
+      "package": "com.compdfkit.reactnative.example"
    }
  }

[!NOTE] 该指南使用RN Demo ApplicationId进行示例， 您也可以修改为您产品的ApplicationId。

开发版本 ​

开发构建允许你在 Expo Go 客户端之外运行 React Native 应用。它将生成相应平台模块，包含应用独立运行所需的全部原生代码。

EAS 配置存储在 eas.json 文件中。请在项目根目录下运行以下命令以生成和配置该文件：

eas build:configure

[!TIP] 如果您是首次使用该命令，运行时需要登录相关账号；如果尚未注册，请先注册 Expo 账号。

你将看到一个平台列表，你可以从中选择最适合你应用的平台。然后按 Enter 键。

如果你选择了 All ，现在你项目中将出现 eas.json 文件。它看起来是这样的：

{
	"cli": {
		"version": ">= 5.4.0"
	},
	"build": {
		"development": {
			"developmentClient": true,
			"distribution": "internal"
		},
		"preview": {
			"distribution": "internal"
		},
		"production": {}
	},
	"submit": {
		"production": {}
	}
}

现在您的 Expo 项目已设置好开发构建，您可以在没有安装 Expo Go 客户端的 Android 模拟器或 iOS 模拟器上运行应用。为了验证设置是否正确运行，请在本地上启动您的应用，无需安装 Expo Go 客户端：

npx expo run:android

npx expo run:ios

安装 ​

您可以通过以下两种方式集成 SDK：

• 通过 ComPDFKit GitHub 仓库:

  • 在 compdfkit_expo 文件夹下，运行以下命令安装：
  shell

  yarn add github:ComPDFKit/compdfkit-pdf-sdk-react-native

  1
  

• 通过 ComPDFKit npm 包:

  在 compdfkit_expo 文件夹下，运行以下命令：

  shell

  yarn add @compdfkit_pdf_sdk/react_native

  1
  

对于 ComPDFKit 原生模块在 Android 和 iOS 上，还需要一些平台特定的设置。

Android ​

打开 android/app/src/main/AndroidManifest.xml , 添加 **网络权限 **和 存储权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.compdfkit.flutter.example">

+    <uses-permission android:name="android.permission.INTERNET"/>

    <!-- Required to read and write documents from device storage -->
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

		<!-- Optional settings -->
+    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />

    <application
+    android:requestLegacyExternalStorage="true"
        ...>
	...
    </application>
</manifest>

iOS ​

在文本编辑器中打开项目的 Podfile 文件：

open ios/Podfile

在 target 'compdfkitexpo' do ... end 代码块中添加以下内容：

target 'MyApp' do
    # ...
+    pod "ComPDFKit", podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit/2.4.0.podspec'
+    pod "ComPDFKit_Tools", podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit_tools/2.4.0.podspec'
    # ...
end

然后在 ios 文件夹下执行 pod install 命令。

打开一个PDF ​

现在，将指导您打开一个PDF文件，首先请将测试PDF文件添加到您Android的android/app/src/main/assets文件夹中。这个文件夹通常不存在， 您需要先创建它。

在 iOS 上，通过将下载的 PDF 拖入您的项目来将其添加到应用程序包中。

接下来，要加载 PDF，将 index.tsx 中的全部内容替换为以下代码片段：

import { Platform, SafeAreaView } from 'react-native';

import { Component } from 'react';
import { ComPDFKit, CPDFReaderView } from '@compdfkit_pdf_sdk/react_native';

const androidLicense = 'android license';

const iosLicense = 'ios license';

type Props = {};

export default class HomeScreen extends Component<Props> {

  constructor(props: Props) {
    super(props)
    this.initialize()
  }
  async initialize() {
    var result = await ComPDFKit.init_(Platform.OS === 'android' ? androidLicense : iosLicense);
    console.log("ComPDFKitRN", "init_:", result)
  }
  samplePDF = Platform.OS === 'android'
    ? 'file:///android_asset/PDF_Document.pdf'
    : 'PDF_Document.pdf';

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <CPDFReaderView
          document={this.samplePDF}
          configuration={ComPDFKit.getDefaultConfig({})}
          style={{ flex: 1 }}
        />
      </SafeAreaView>
    );
  }
}

ComPDFKit ReactNative SDK试用的许可证可通过Github示例项目获取，或请联系我们销售团队。

现在您可以使用 yarn run android 或 yarn run ios 运行您的应用，PDF 将从您提供的路径加载。

ComPDFKit ReactNative SDK 不会在您使用 expo start 运行项目时工作，因为将使用 Expo Go 应用程序，并且 ComPDFKit 包的本地模块将不可访问。

以上则是关于如何使用Expo集成ComPDFKit ReactNative SDK相关指南，如果您有任何疑问请联系我们。