• React Native下载打开pdf文件 2017-12-01 10:12:06
    使用到的组件 react-native-fs 文件下载组件 GitHub - johanneslumpe/react-native-fs: Native filesystem access for ...react-native-pdf-view pdf显示组件 GitHub - cnjon/react-native-pdf-view: React Na

    使用到的组件

    • react-native-fs 文件下载组件 GitHub - johanneslumpe/react-native-fs: Native filesystem access for react-native

    • react-native-pdf-view pdf显示组件 GitHub - cnjon/react-native-pdf-view: React Native PDF View



    组件安装

    cd到你的项目目录下,执行下面的命令安装

    npm install react-native-fs --save
    react-native link react-native-fs
    npm i react-native-pdf-view --save
    react-native link react-native-pdf-view

    示例代码

    首先下载pdf文件到本地,react-native-pdf-view组件现在只能支持显示手机本地pdf

    1.   var DownloadFileOptions = {

    2.            fromUrl: pdfDownloadURL,          // URL to download file from

    3.            toFile: this.pdfPath         // Local filesystem path to save the file to

    4.        }

    5.        var result = RNFS.downloadFile(DownloadFileOptions);

    6.        console.log(result);

    7.        var _this = this;

    8.        result.then(function (val) {

    9.            _this.setState({

    10.                isPdfDownload: true,

    11.            });

    12.        }, function (val) {

    13.            console.log('Error Result:' + JSON.stringify(val));

    14.        }

    15.        ).catch(function (error) {

    16.            console.log(error.message);

    17.        });

    显示pdf,因为可能有多页,所以在打开第一页后,利用onLoadComplete事件获取到一共有多少页,然后动态加载后面的几页

    1. render() {

    2.        if (!this.state.isPdfDownload) {

    3.            return (

    4.                <View style={styles.container}>

    5.                    <Text>Downloading</Text>

    6.                </View>

    7.            );

    8.        }

    9.        var pages = [];

    10.        for (var i = 2; i < this.state.pageCount + 1; i++) {

    11.            pages.push(

    12.                <PDFView ref={(pdf) => { this.pdfView = pdf; } }

    13.                    key={"sop" + i}

    14.                    path={this.pdfPath}

    15.                    pageNumber={i}

    16.                    style={styles.pdf} />

    17.            );

    18.        }

    19.        return (

    20.            <ScrollView style={styles.pdfcontainer}>

    21.                <PDFView ref={(pdf) => { this.pdfView = pdf; } }

    22.                    key="sop"

    23.                    path={this.pdfPath}

    24.                    pageNumber={1}

    25.                    onLoadComplete={(pageCount) => {

    26.                        this.setState({ pageCount: pageCount });

    27.                        console.log(`pdf共有: ${pageCount}页`);

    28.                    } }

    29.                    style={styles.pdf} />

    30.                {pages.map((elem, index) => {

    31.                    return elem;

    32.                })}

    33.            </ScrollView>

    34.        )

    35.    }

    完整代码: GitHub地址:https://github.com/forrest23/reacttest

    展开全文
  • 使用到的组件 react-native-fs 文件下载组件 GitHub - johanneslumpe/... Native filesystem access for react-nativereact-native-pdf-view pdf显示组件 GitHub - cnjon/react-native-pdf-view: React Native P
  • 项目中使用到pdf文件查看,简单记录; 添加依赖: npm install react-native-pdf --save 或 ...react-native link react-native-pdf 主要代码: <View style={styles.container}> ...
  • React Native Awesome(汇聚知识,分享精华)React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。
  • React Native学习资料 2017-03-08 10:28:11
    React Native Awesome(汇聚知识,分享精华) React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是一名React Native爱好者,或者...
  • React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是一名React Native爱好者,或者有一颗热爱钻研新技术的心,喜欢分享技术干货、...
  • 组件和API(第三方组件也很有用) React Native 提供了一些内置的组件...React Native 是大开源社区的作品,所以你还可以在 github 或是 npm 上搜索到带有react native关键字的大量的第三方组件。 基础组件 交互控...
  • 分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单;本文则是对于半年来发布的前端每周清单中的 React 相关的教程...
  • React Native开源图表组件(react-native-chart-android) React Native开源Material Design组件(react-native-material-design) React Native二维码图片生成组件(react-native-qrcode)
  • HackerNews-React-NativeReact Native 完成的 HackerNews 客户端。 WeChat实现类似微信朋友圈或者QQ空间,评论回复,九宫格布局。处理键盘弹出后定位到当前点击的被评论人处。另:滑动时候FPS在57-60之间,纵享...
  • 前言 VS Code越来越好用了,怎么个好用法,等我抽个时间再水一篇,说收VS Code的亮点; ...react-explorer-addons: 增加鼠标右键直接生成react的组件模板,好不好用,用过的才知道 CSS Blocks: 支持...
  • react作为ui在运行 2019-02-07 13:01:03
    原译文:React作为ui运行 原文: React as a UI Runtime React as a UI Runtime 大多数的教程介绍React是作为一个ui库。这个是说的通的,因为React是一个UI库。这就是标语所说的! 我之前写过关于创建用户界面的...
  • 随着移动开发技术的发展与成熟,移动端所处的萌芽阶段也早已结束。现在,iOS与Android系统已经越来越成熟,各种App之间的系统差异性也越来越小,可以说,移动开发技术已经进入了“下半场”。其中,如何构建大前端的...
  • Angular 2与React比较 2016-09-17 14:56:47
    Angular 2与React的选择其实只是一种风格偏好。React专注于渲染速度且能够在客户端或原生应用内处理复杂的UI设计,而Angular 2则更具开发普适性。它既能够引导我们逐步构建自己的应用,同时也提供一定的表现力及可...
  • GIT开源安卓项目Top100 2017-06-02 11:17:23
    GIT安卓项目Top100 ...这个是 Facebook 在 React.js Conf 2015 大会上推出的基于 JavaScript 的开源框架 React Native, 该框架结合了 Web 应用和 Native 应用的优势, 可以使用 JavaScript 来开发 iOS 和 A
  • 原文:overreacted.io/react-as-a-… 很多教程都把 React 作为一个 UI 库来引入。这是很有道理的,因为 React 本身就是一个 UI 库。就像官网上所说的那样。 我曾经写过关于构建用户界面中遇到的挑战的文章。但是...
  • 用git管理自己读的书 2019-01-12 06:49:48
    福昕阅读器,可以方便地做书签和备注。使用git去管理图书和示例代码,一方面能够很好地保存这些资料,方便查找;另外一方面,无论在家,还是在公司,都能很好地同步自己学习的进度。  福昕阅读器5(视图--&gt;...
  • 阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 下列工具中的重要性与排序无关。 1.Webpack Bundle Analyzer 有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? Webpack Bundle ...
1 2 3 4 5 ... 20
收藏数 582
精华内容 232