创建一个App

让我们创建一个简单的集成 ComPDFKit for React Native 的应用程序。

在终端应用中，将当前工作目录更改为您希望保存您的项目的位置。在这个例子中，我们会使用 ~/Documents/ 目录：
bash
```
cd ~/Documents
```
1
运行以下命令创建 React Native 项目：
bash
```
react-native init compdfkit_rn
```
1
在终端应用中，将当前工作目录的位置更改到新创建的项目中：
bash
```
cd compdfkit_rn
```
1
添加 ComPDFKit 库并导入展示的 PDF 文档。

Android

在项目根目录下打开 "android/build.gradle" 文件，并添加mavenCentral仓库：

diff

repositories {
    google()
+   mavenCentral()
}

打开 App 的 Gradle 构建文件 "android/app/build.gradle" ：

bash

open android/app/build.gradle

修改 App 最低支持的系统版本，这些操作都在 "android/app/build.gradle" 文件中的 android 部分里完成（如下所示）：

diff

 android {
     defaultConfig {
-        minSdkVersion rootProject.ext.minSdkVersion
+        minSdkVersion 21
         ...
     }
 }

在 dependencies 部分加入 ComPDFKit SDK：

diff

dependencies {
    ...
+    implementation 'com.compdf:compdfkit:1.13.0'
+    implementation 'com.compdf:compdfkit-ui:1.13.0'
+    implementation 'com.compdf:compdfkit-tools:1.13.0'
}

打开 "android/app/src/main/AndroidManifest.xml" 文件，添加网络、存储权限。

diff

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.compdfkit.flutter.example">
    
    <!-- 在线认证License需要使用网络权限！ -->
+    <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"/>
+    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />

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

请将样例项目的 Android 项目 "pdf" 文件夹和 res/layout 代码，复制到您的项目中。

打开 "MainApplication" 文件，并在 getPackages() 方法中填入以下代码。

diff

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
+  packages.add(new PDFReactPackage());
  return packages;
}

将样例 PDF 文件复制到 assets 目录中：

iOS

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

bash

open ios/Podfile

将平台更新为 iOS 11 并添加 "compdfkit_flutter.podspec" ：

diff

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

- platform :ios, '10.0'
+ platform :ios, '11.0'
install! 'cocoapods', :deterministic_uuids => false

target 'PDFView_RN' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'PDFView_RNTests' do
    inherit! :complete
    # Pods for testing
  end

+  pod 'ComPDFKit_Tools', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit_tools/1.13.0.podspec'
+  pod 'ComPDFKit', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit/1.13.0.podspec'

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

转到 "compdfkit_rn/ios" 文件夹并运行pod install命令：

bash

pod install

注意:: 如果SSL网络请求在运行' pod install '时下载' ComPDFKit '库失败，您可以查看故障排除中的处理方法。

在 Xcode 中打开项目的 Workspace：

bash

open ios/PDFView_RN.xcworkspace

确保部署目标设置为 10.0 或更高：

导入资源文件，***"OpenPDFModule.swift"***是React Native连接iOS原生的桥接文件。

1-2

在**"Build Settings中搜索bridging**，找到Objective-C bridging Header选项，然后输入头文件 "ComPDFKit_RN-Bridging-Header.h" 的文件路径:

1-9

通过将想要显示的 PDF 文档拖入项目来添加文档到应用中。您可以使用 "developer_guide_ios.pdf" 作为例子。拖入文档时，在显示的对话框中，选择 Finish 接受默认的集成选项。

为了保护用户隐私，在访问敏感的隐私数据之前，需要找到 iOS 10.0 或更高版本 iOS 项目中的 "Info" 配置，并按照下图所示配置相关隐私条款。

objective-c

<key>NSCameraUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSMicrophoneUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>Your consent is required before you could access the function.</string>
  
<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
	</dict>

创建一个App ​

Android ​

iOS ​

创建一个App

Android

iOS