react native pdf

رد الفعل الأصلي-pdf

مكون عرض PDF أصلي للتفاعل (دعم عبر الأنظمة الأساسية)

ميزة

• قراءة ملف PDF من عنوان url أو blob أو ملف محلي أو أصل ويمكن تخزينه مؤقتًا.
• عرض أفقيا أو عموديا
• السحب والتكبير
• اضغط مرتين للتكبير
• دعم حماية كلمة المرور pdf
• انتقل إلى صفحة معينة في ملف pdf

الإصدارات المدعومة

نستخدم react-native-blob-util للتعامل مع الوصول إلى نظام الملفات في هذه الحزمة، لذا يجب عليك تثبيت React-Native-pdf و React-Native-blob-util

يوضح الجدول أدناه الإصدارات المدعومة من React Native وreact-native-blob-util لإصدارات مختلفة من react-native-pdf .

رد الفعل الأصلي	0.4x - 0.56	0.57	0.60+	0.62+	0.62+
رد الفعل الأصلي-pdf	4.xx - 5.0.x	5.0.9+	6.0.0+	6.2.0+	6.4.0+
رد الفعل الأصلي-blob-util					0.13.7+

Expo: هذه الحزمة غير متوفرة في تطبيق Expo Go. تعرف على كيفية استخدام هذه الحزمة في Custom Dev Clients عبر ملحق Expo Config الإضافي. مثال: with-pdf .

تثبيت

 # Using npm
npm install react-native-pdf react-native-blob-util --save

# or using yarn:
yarn add react-native-pdf react-native-blob-util

ثم اتبع الإرشادات الخاصة بنظامك الأساسي لربط ملف React-Native-pdf بمشروعك:

تثبيت دائرة الرقابة الداخلية

تفاصيل دائرة الرقابة الداخلية

رد الفعل الأصلي 0.60 وما فوق

قم بتشغيل pod install في دليل ios . الارتباط غير مطلوب في React Native 0.60 وما فوق.

رد الفعل الأصلي 0.59 وما دونه

react-native link react-native-blob-util
react-native link react-native-pdf

تثبيت أندرويد

تفاصيل الروبوت

إذا كنت تستخدم RN 0.59.0 وما فوق ، فيرجى إضافة ما يلي إلى android/app/build.gradle**

android {

+    packagingOptions {
+       pickFirst 'lib/x86/libc++_shared.so'
+       pickFirst 'lib/x86_64/libjsc.so'
+       pickFirst 'lib/arm64-v8a/libjsc.so'
+       pickFirst 'lib/arm64-v8a/libc++_shared.so'
+       pickFirst 'lib/x86_64/libc++_shared.so'
+       pickFirst 'lib/armeabi-v7a/libc++_shared.so'
+     }

   }

رد الفعل الأصلي 0.59.0 وما دونه

react-native link react-native-blob-util
react-native link react-native-pdf

تثبيت ويندوز

تفاصيل ويندوز

• افتح الحل الخاص بك في Visual Studio 2019 (على سبيل المثال، windowsyourapp.sln )
• انقر بزر الماوس الأيمن فوق رمز الحل في Solution Explorer > إضافة > المشروع الحالي...
• في حالة تشغيل RNW 0.62: أضف node_modulesreact-native-pdfwindowsRCTPdfRCTPdf.vcxproj
• في حالة تشغيل RNW 0.62: أضف node_modulesreact-native-blob-utilwindowsReactNativeBlobUtilReactNativeBlobUtil.vcxproj
• انقر بزر الماوس الأيمن فوق مشروع التطبيق الرئيسي > إضافة > مرجع...
• حدد progress-view وفي مشاريع الحلول
  • في حالة تشغيل الإصدار 0.62، حدد أيضًا RCTPdf و ReactNativeBlobUtil
• في التطبيق pch.h أضف #include "winrt/RCTPdf.h"
  • في حالة تشغيل الإصدار 0.62، حدد أيضًا #include "winrt/ReactNativeBlobUtil.h"
• في App.cpp أضف PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); قبل InitializeComponent();
  • في حالة تشغيل RNW 0.62، أضف أيضًا PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); and PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider());

تجميع ملفات PDF مع التطبيق

لإضافة ملف test.pdf كما في المثال، قم بإضافة:

 <None Include="....test.pdf">
  <DeploymentContent>true</DeploymentContent>
</None>

في ملف .vcxproj الخاص بالتطبيق، قبل <None Include="packages.config" /> .

التعليمات

تفاصيل الأسئلة الشائعة

س1. بعد التثبيت والتشغيل لا أستطيع رؤية ملف pdf.
ج1: ربما نسيت تنفيذ react-native link أو أنه لا يعمل بشكل صحيح. يمكنك إضافته يدويًا. وللتفصيل يمكنك مراجعة العدد #24 ورقم #2

س2. عند التشغيل، يُظهر 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
أ2. إصدار رد الفعل الأصلي الخاص بك قديم جدًا، يرجى ترقيته إلى 0.47.0+ راجع أيضًا #39

س3. عندما أقوم بتشغيل التطبيق النموذجي، أحصل على شاشة بيضاء/رمادية / شريط التحميل لا يتقدم.
أ3. تحقق من معرف uri الخاص بك، إذا وصلت إلى ملف pdf مستضاف على http فستحتاج إلى القيام بما يلي:

iOS: إضافة استثناء للخادم الذي يستضيف ملف pdf في ios info.plist . هنا مثال:

 <key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>

أندرويد: see here

س 4. لماذا لا يعمل مع معرض رد الفعل الأصلي؟
A4. لا يدعم Expo الوحدة الأصلية. يمكنك قراءة المزيد من تحذيرات المعرض here

س5. لماذا لا يمكنني تشغيل مثال iOS؟ 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
أ5. قم بتشغيل الأوامر التالية في مجلد المشروع (على سبيل المثال react-native-pdf/example ) للتأكد من توفر جميع التبعيات:

 yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios

سجل التغيير

تفاصيل سجل التغيير

الإصدار 6.7.6 1. تم الإصلاح: إضافة 'enableDoubleTapZoom' المفقود إلى مصدر ترميز النسيج (#832) 2. تم الإصلاح: تمت إضافة دعامة 'scrollEnabled' المفقودة (#842) 3. تم الإصلاح: java.lang.IllegalStateException: محاولة الوصول إلى وحدة JS قبل إعداد نسخة React بالكامل (#840) 4. تم الإصلاح: مشكلة تتعطل عندما لا يتم الإلغاء موجود (#852) 5. تمت الإضافة: إضافة طريقة تحميل (#861) 6. تم الإصلاح: تم فك ترميز الحرف المميز المشفر بشكل غير صحيح (#873) 7. تم الإصلاح: تم إصلاح خطأ EnableDoubleTapZoom

v6.7.5

1. تمت إضافة دعم ProgressContainerStyle
2. تحسين: تمت إضافة خيار EnableDoubleTapZoom
3. اصلاح: إصلاح تعطل التطبيق مع this.lastRNBFTask.cancel ليس دالة (#827)
4. تم الإصلاح: إزالة التجاوز لإصلاح الخطأ "لا توجد طرق مطابقة للتجاوز" (#822)

v6.7.4

1. ثابت: إصلاح مشكلة تعطل Android

v6.7.3

1. ثابت: إصلاح اسم حزمة الروبوت

v6.7.2

1. ثابت: إصلاح iOS انقر نقرًا مزدوجًا فوق التمرير للتكبير
2. ثابت: إصلاح التوافق RN 73
3. تم إصلاح: رفع crypto-js لتجنب الثغرات الأمنية الحرجة

v6.7.1

1. ثابت: إصلاح إعداد مشروع iOS
2. ثابت: إصلاح الخطأ المطبعي في واجهة RNPDFPdfViewManagerInterface مما تسبب في خطأ في بناء أندرويد

v6.7.0

1. ثابت: الإصلاح (iOS): الصفحة المركزية عند نقطة النقر بعد النقر المزدوج للتكبير
2. تم الإصلاح: إضافة PDFKit إلى podspec لتجميع ios
3. تم التحسين: قم بتحديث build.gradle لدعم RN 0.71 على القوس الجديد
4. ثابت: إصلاح بعض الأخطاء الصغيرة والمستندات.

v6.6.2

1. تم إصلاح: الترحيل إلى ViewPropTypes المُصدَّر من "أنواع الدعامات الأصلية المتفاعلة المهملة"
2. تمت الإضافة: فك تشفير مسار الملف لنظام iOS
3. تم تحسينه: تفضيل الصفحة الحالية لحساب عامل القياس عند الملاءمة

v6.6.1 مكتئب

v6.6.0 مكتئب

1. تم إصلاح: الترحيل إلى ViewPropTypes المُصدَّر من "أنواع الدعامات الأصلية المتفاعلة المهملة"
2. تمت الإضافة: فك تشفير مسار الملف لنظام iOS
3. تم تحسينه: تفضيل الصفحة الحالية لحساب عامل القياس عند الملاءمة
4. تحسين: مصدر نسخة الآلة الكاتبة

v6.5.0

1. الإصلاح: استبدل mavenCentral بـ maven
2. كسر التغيير (Android): استبدال المستودع المهمل: jcenter ()
3. إصلاح: تقدم التحميل
4. إضافة: دعامة "المصدر" المكتوبة
5. إزالة: التبعية لfbjs

v6.4.0

1. قم بإزالة العينة لتقليل حجم حزمة NPM
2. أضف دعمًا لإعداد اسم ملف لملف pdf المخزن مؤقتًا
3. استخدم رد الفعل الأصلي-blob-util بدلاً من rn-fetch-blob
4. إضافة دعم النقطة
5. إزالة تبعية عرض التقدم

v6.3.0

1. إضافة دعم ويندوز
2. إصلاح بعض الخلل

[أكثر]

مثال

 /**
 * Copyright (c) 2017-present, Wonday (@wonday.org)
 * All rights reserved.
 *
 * This source code is licensed under the MIT-style license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React from 'react' ;
import { StyleSheet , Dimensions , View } from 'react-native' ;
import Pdf from 'react-native-pdf' ;

export default class PDFExample extends React . Component {
    render ( ) {
        const source = { uri : 'http://samples.leanpub.com/thereactnativebook-sample.pdf' , cache : true } ;
        //const source = require('./test.pdf');  // ios only
        //const source = {uri:'bundle-assets://test.pdf' };
        //const source = {uri:'file:///sdcard/test.pdf'};
        //const source = {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."};
        //const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"};
        //const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"};

        return (
            < View style = { styles . container } >
                < Pdf
                    source = { source }
                    onLoadComplete = { ( numberOfPages , filePath ) => {
                        console . log ( `Number of pages: ${ numberOfPages } ` ) ;
                    } }
                    onPageChanged = { ( page , numberOfPages ) => {
                        console . log ( `Current page: ${ page } ` ) ;
                    } }
                    onError = { ( error ) => {
                        console . log ( error ) ;
                    } }
                    onPressLink = { ( uri ) => {
                        console . log ( `Link pressed: ${ uri } ` ) ;
                    } }
                    style = { styles . pdf } />
            </ View >
        )
    }
}

const styles = StyleSheet . create ( {
    container : {
        flex : 1 ,
        justifyContent : 'flex-start' ,
        alignItems : 'center' ,
        marginTop : 25 ,
    } ,
    pdf : {
        flex : 1 ,
        width : Dimensions . get ( 'window' ) . width ,
        height : Dimensions . get ( 'window' ) . height ,
    }
} ) ;

إعدادات

ملكية	يكتب	تقصير	وصف	دائرة الرقابة الداخلية	أندرويد	ويندوز	الإصدار الأول
مصدر	هدف	ليست فارغة	مصدر PDF مثل {uri:xxx، ذاكرة التخزين المؤقت:خطأ}. انظر ما يلي لمزيد من التفاصيل.	✔	✔	✔	<3.0
صفحة	رقم	1	فهرس الصفحة الأولية	✔	✔	✔	<3.0
حجم	رقم	1.0	يجب أن يكون minScale<=scale<=maxScale	✔	✔	✔	<3.0
minScale	رقم	1.0	مقياس الحد الأدنى	✔	✔	✔	5.0.5
maxScale	رقم	3.0	الحد الأقصى	✔	✔	✔	5.0.5
أفقي	منطقي	خطأ شنيع	ارسم اتجاه الصفحة، إذا كنت تريد الاستماع إلى تغيير الاتجاه، فيمكنك استخدام [react-native-orientation-locker]	✔	✔	✔	<3.0
يعرض مؤشر التمرير الأفقي	منطقي	حقيقي	يظهر أو يخفي مؤشر شريط التمرير الأفقي على نظام iOS	✔			6.6
يظهرVerticalScrollIndicator	منطقي	حقيقي	يظهر أو يخفي مؤشر شريط التمرير العمودي على نظام iOS	✔			6.6
التمرير تمكين	منطقي	حقيقي	تمكين أو تعطيل التمرير	✔			6.6
fitWidth	منطقي	خطأ شنيع	إذا كان صحيحًا يناسب عرض العرض، فلا يمكن استخدام fitWidth=true مع المقياس	✔	✔	✔	<3.0، مهجور من 3.0
fitPolicy	رقم	2	0: مناسب للعرض، 1: مناسب للارتفاع، 2: مناسب لكليهما (افتراضي)	✔	✔	✔	3.0
تباعد	رقم	10	حجم الكسارة بين الصفحات	✔	✔	✔	<3.0
كلمة المرور	خيط	""	كلمة مرور pdf، إذا كان هناك خطأ في كلمة المرور، فسوف تستدعي OnError() مع ظهور الرسالة "كلمة المرور مطلوبة أو كلمة المرور غير صحيحة."	✔	✔	✔	<3.0
أسلوب	هدف	{لون الخلفية:"#eee"}	دعم نمط العرض العادي، يمكنك استخدام هذا لتعيين لون الحدود/التباعد...	✔	✔	✔	<3.0
progressContainerStyle	هدف	{لون الخلفية:"#eee"}	دعم نمط العرض العادي، يمكنك استخدام هذا لتعيين لون الحدود/التباعد...	✔	✔	✔	6.9.0
renderActivityIndicator	(التقدم) => المكون		عند التحميل، أظهره كمؤشر، يمكنك استخدام المكون الخاص بك	✔	✔	✖	<3.0
تمكين منع التعرج	منطقي	حقيقي	قم بتحسين العرض قليلاً على الشاشات منخفضة الدقة، ولكن ربما تواجه بعض المشكلات على Android 4.4، لذا أضف مفتاحًا	✖	✔	✖	<3.0
تمكين الترحيل	منطقي	خطأ شنيع	عرض صفحة واحدة فقط في الشاشة	✔	✔	✔	5.0.1
تمكينRTL	منطقي	خطأ شنيع	قم بتمرير الصفحة كـ "page3، page2، page1"	✔	✖	✔	5.0.1
تمكين التعليق التوضيحي	منطقي	حقيقي	تمكين عرض التعليقات التوضيحية، ملاحظة: نظام iOS يدعم الإعداد الأولي فقط، ولا يدعم التغيير في الوقت الفعلي	✔	✔	✖	5.0.3
تمكينDoubleTapZoom	منطقي	حقيقي	تمكين النقر المزدوج لتكبير الإيماءة	✔	✔	✖	6.8.0
TrustAllCerts	منطقي	حقيقي	السماح بالاتصالات بالخوادم ذات الشهادة الموقعة ذاتيًا	✔	✔	✖	6.0.؟
صفحة واحدة	منطقي	خطأ شنيع	إظهار الصفحة الأولى فقط، وهو مفيد لعرض الصور المصغرة	✔	✔	✔	6.2.1
onLoadProgress	وظيفة (في المئة)	باطل	رد الاتصال عند التحميل، وإرجاع تقدم التحميل (0-1)	✔	✔	✖	<3.0
onLoadComplete	الوظيفة (عدد الصفحات، المسار، {العرض، الارتفاع}، محتويات الجدول)	باطل	رد الاتصال عند اكتمال تحميل pdf، وإرجاع إجمالي عدد الصفحات، ومسار pdf المحلي/ذاكرة التخزين المؤقت، و{width,height} وجدول المحتويات	✔	✔	✔ ولكن بدون محتويات الجدول	<3.0
onPageChanged	وظيفة (الصفحة، عدد الصفحات)	باطل	رد الاتصال عند تغيير الصفحة وإرجاع الصفحة الحالية وإجمالي عدد الصفحات	✔	✔	✔	<3.0
خطأ	وظيفة (خطأ)	باطل	رد الاتصال عند حدوث خطأ	✔	✔	✔	<3.0
onPageSingleTap	وظيفة (صفحة)	باطل	رد الاتصال عندما يتم النقر على الصفحة مرة واحدة	✔	✔	✔	3.0
onScaleChanged	وظيفة (مقياس)	باطل	رد الاتصال عند قياس الصفحة	✔	✔	✔	3.0
onPressLink	وظيفة (أوري)	باطل	رد الاتصال عند النقر على الرابط	✔	✔	✖	6.0.0

معلمات المصدر

المعلمة	وصف	تقصير	دائرة الرقابة الداخلية	أندرويد	ويندوز
أوري	مصدر pdf، راجع ما يلي لمزيد من التفاصيل.	مطلوب	✔	✔	✔
مخبأ	استخدام ذاكرة التخزين المؤقت أم لا	خطأ شنيع	✔	✔	✖
اسم ملف ذاكرة التخزين المؤقت	اسم ملف محدد لملف pdf المخزن مؤقتًا	نتيجة SHA1(uri).	✔	✔	✖
انتهاء	انتهت صلاحية ملف ذاكرة التخزين المؤقت بالثواني (0 لم تنتهي صلاحيته)	0	✔	✔	✖
طريقة	طريقة الطلب عندما يكون uri هو عنوان url	"يحصل"	✔	✔	✖
رؤوس	طلب الرؤوس عندما يكون uri هو عنوان url	{}	✔	✔	✖

أنواع source.uri

الاستخدام	وصف	دائرة الرقابة الداخلية	أندرويد	ويندوز
{uri:"http://xxx/xxx.pdf"}	تحميل pdf من عنوان url	✔	✔	✔
{require("./test.pdf")}	تحميل pdf مرتبط بملف js (لا تحتاج إلى إضافة بواسطة xcode)	✔	✖	✖
{uri:"bundle-assets://path/to/xxx.pdf"}	قم بتحميل ملف pdf من الأصول، ويجب أن يكون الملف على android/app/src/main/assets/path/to/xxx.pdf	✖	✔	✖
{uri:"bundle-assets://xxx.pdf"}	قم بتحميل pdf من الأصول، ويجب عليك إضافة pdf إلى المشروع بواسطة xcode. هذا لا يدعم المجلد.	✔	✖	✖
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."}	تحميل pdf من سلسلة base64	✔	✔	✔
{uri:"file:///absolute/path/to/xxx.pdf"}	تحميل pdf من نظام الملفات المحلي	✔	✔	✔
{uri:"ms-appx:///xxx.pdf"}}	قم بتحميل ملف pdf مع تطبيق UWP	✖	✖	✔
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"}	تحميل قوات الدفاع الشعبي من المحتوى URI	✔*	✖	✖
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"}	تحميل pdf من URL blob	✖	✔	✖

*) يتطلب إنشاء React Native من المصدر باستخدام هذا التصحيح

طُرق

• setPage

تعمل الطرق على مرجع لعنصر PDF. يمكنك الحصول على مرجع بالكود التالي:

 return (
  <Pdf
    ref={(pdf) => { this.pdf = pdf; }}
    source={source}
    ...
  />
);

مجموعة الصفحة ()

setPage(pageNumber)

قم بتعيين الصفحة الحالية لمكون PDF. رقم الصفحة هو عدد صحيح موجب. إذا كان رقم الصفحة > رقم الصفحات، فلن تتغير الصفحة الحالية.

مثال:

 this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything