永利最大(官方)网站

我们将使用PDFTron最近发布的TypeScript对PDFTron React Native SDK的支持。如果你对React Native感到陌生，它是一个开源的框架，用于在一个代码库中构建原生移动应用程序。PDFTron SDK使用React Native来创建跨平台的PDF浏览器，具有传统原生应用程序的流畅外观和感觉。

在本教程结束时，你将建立这样的东西:

第一步：用React Native和TypeScript创建一个应用程序

首先，让我们使用TypeScript模板创建一个简单的React Native应用。

 注意：如果你之前在全局范围内安装了react-native-cli，请先删除它，以防止出现意外行为。你可以按照这些步骤进行npm或yarn的安装。

// npm
npm i -g @react-native-community/cli
react-native init PDFDemo --template react-native-template-typescript --npm
cd PDFDemo

//yarn
yarn global add @react-native-community/cli
react-native init PDFDemo --template react-native-template-typescript
cd PDFDemo

第2步：安装PDF SDK库

通过调用以下方式安装 react-native-pdftron。

//npm
npm install github:PDFTron/pdftron-react-native --save
npm install @react-native-community/cli --save-dev
npm install @react-native-community/cli-platform-android --save-dev
npm install @react-native-community/cli-platform-ios --save-dev
npm install

//yarn
yarn add github:PDFTron/pdftron-react-native
yarn add @react-native-community/cli --dev
yarn add @react-native-community/cli-platform-android --dev
yarn add @react-native-community/cli-platform-ios --dev
yarn install

第3步：支持Android和iOS

 我们将告诉你如何将PDFTron的React Native模块添加到应用程序中。安卓系统按照步骤1-5，iOS系统按照步骤1-2。

第4步：查看文件

用下面的内容替换App.tsx。

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, PermissionsAndroid,
BackHandler, NativeModules, Alert } from 'react-native';

import { DocumentView, RNPdftron } from 'react-native-pdftron';

type Props = {};
export default class App extends Component<Props> {

 constructor(props: Props) {
   super(props);

   RNPdftron.initialize("Insert commercial license key here after purchase");
   RNPdftron.enableJavaScript(true);
 }

 onLeadingNavButtonPressed = () => {
   console.log('leading nav button pressed');
   if (Platform.OS === 'ios') {
     Alert.alert(
       'App',
       'onLeadingNavButtonPressed',
       [
         {text: 'OK', onPress: () => console.log('OK Pressed')},
       ],
       { cancelable: true }
     )
   } else {
     BackHandler.exitApp();
   }
 }

 render() {
   const path = "//pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_mobile_about.pdf";

   return (
     <DocumentView
       document={path}
       showLeadingNavButton={true}
       leadingNavButtonIcon={Platform.OS === 'ios' ? 'ic_close_black_24px.png' : 'ic_arrow_back_white_24dp'}
       onLeadingNavButtonPressed={this.onLeadingNavButtonPressed}
     />
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 }
});

 iOS：npm run ios, yarn run ios, 或者在Xcode中打开ios/PDFDemo.xcworkspace，然后点击三角形的运行按钮。

 Android：npm run android, yarn run android或在Android Studio中打开android/，然后点击三角形的运行按钮。