我們將使用PDFTron最近發(fā)布的TypeScript對(duì)PDFTron React Native SDK的支持。如果你對(duì)React Native感到陌生，它是一個(gè)開源的框架，用于在一個(gè)代碼庫中構(gòu)建原生移動(dòng)應(yīng)用程序。PDFTron SDK使用React Native來創(chuàng)建跨平臺(tái)的PDF瀏覽器，具有傳統(tǒng)原生應(yīng)用程序的流暢外觀和感覺。

在本教程結(jié)束時(shí)，你將建立這樣的東西:

第一步：用React Native和TypeScript創(chuàng)建一個(gè)應(yīng)用程序

首先，讓我們使用TypeScript模板創(chuàng)建一個(gè)簡單的React Native應(yīng)用。

 注意：如果你之前在全局范圍內(nèi)安裝了react-native-cli，請(qǐng)先刪除它，以防止出現(xiàn)意外行為。你可以按照這些步驟進(jìn)行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庫

通過調(diào)用以下方式安裝 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模塊添加到應(yīng)用程序中。安卓系統(tǒng)按照步驟1-5，iOS系統(tǒng)按照步驟1-2。

第4步：查看文件

用下面的內(nèi)容替換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 = "http://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，然后點(diǎn)擊三角形的運(yùn)行按鈕。

 Android：npm run android, yarn run android或在Android Studio中打開android/，然后點(diǎn)擊三角形的運(yùn)行按鈕。