首页 » React Native » React Native组件资源 » 正文

[译]React Native开源PDF阅读器组件(react-native-pdf)

尊重版权,转载请注明出处

本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)

开源项目地址:https://github.com/cnjon/react-native-pdf-view

项目介绍

该组件进行封装用来开发React Native平台读取PDF文件的功能,跨平台支持。

刚创建的React Native技术交流3群(496508742)欢迎各位大牛,React Native技术爱好者加入交流!

配置安装

1.1.运行命令进行安装

npm i react-native-pdf-view --save

1.2.修改android/setting.gradle文件

...
include ':PDFView'
project(':PDFView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pdf-view/android')

1.3.修改android/app/build.gradle文件

...
dependencies {
    ...
    compile project(':PDFView')
}

1.4.在MainActivity.java中注册模块

如果RN版本大于等于0.18,注册方法如下:

import com.keyee.pdfview.PDFView;  // <--- import

public class MainActivity extends ReactActivity {
  ......
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new PDFView(), // <------ add here
        new MainReactPackage());
    }
}

如果RN版本小于0.18,注册方法如下:

import com.keyee.pdfview.PDFView;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  ......

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new PDFView())              // <------ add here
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ......

}
使用说明

在使用过程中第一步需要导入模块

import PDFView from 'react-native-pdf-view';
使用实例
'use strict';

import React,{
    Component,
    StyleSheet,
    View
} from 'react-native';

import PDFView from 'react-native-pdf-view';

export default class PDF extends Component {
    constructor(props) {
        super(props);
    }

    render(){
      <PDFView ref={(pdf)=>{this.pdfView = pdf;}}
                         src={"sdcard/pdffile.pdf"}
                         onLoadComplete = {(pageCount)=>{
                            this.pdfView.setNativeProps({
                                zoom: 1.5
                            });
                         }}
                         style={styles.pdf}/>
    }
}
var styles = StyleSheet.create({
    pdf: {
        flex:1
    }
});
配置选项
属性 类型 默认值 描述 iOS Android
path string null pdf absolute path
src string null pdf absolute path(Deprecated)
asset string null the name of a PDF file in the asset folder
pageNumber number 1 page index
zoom number 1.0 zoom scale
onLoadComplete function null page load complete,return page count