彩票走势图

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

原创|行业资讯|编辑:何跃|2022-01-20 10:27:52.560|阅读 202 次

概述:在本教程中,我们展示了如何使用PDFTron SDK(具有完整的文档编辑和注释能力)和React Native创建一个简单的、类型安全的PDF查看器。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

我们将使用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/,然后点击三角形的运行按钮。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP