如何用React Native和TypeScript构建一个类型安全的PDF浏览器

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

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

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

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

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

// npmnpm i -g @react-native-community/clireact-native init PDFDemo --template react-native-template-typescript --npmcd PDFDemo//yarnyarn global add @react-native-community/clireact-native init PDFDemo --template react-native-template-typescriptcd PDFDemo

第2步：安装PDF SDK库

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

//npmnpm install github:PDFTron/pdftron-react-native --savenpm install @react-native-community/cli --save-devnpm install @react-native-community/cli-platform-android --save-devnpm install @react-native-community/cli-platform-ios --save-devnpm install//yarnyarn add github:PDFTron/pdftron-react-nativeyarn add @react-native-community/cli --devyarn add @react-native-community/cli-platform-android --devyarn add @react-native-community/cli-platform-ios --devyarn install

第3步：支持Android和iOS

我们GitHub上的说明将告诉你如何将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 = "https://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/，然后点击三角形的运行按钮。

标签：