عرض مصدر ReactNative/webview

<noinclude>{{DISPLAYTITLE:المكون WebView في ReactNative}}</noinclude>
'''مكون مهمل''': انظر [https://github.com/react-native-community/react-native-webview react-native-webview].

يستخدم لعرض صفحات الويب داخل التطبيق.

'''مثال''': عرض صفحة ويب خارجية.

<syntaxhighlight class="react">import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{
          uri: 'https://github.com/facebook/react-native'
        }}
        style={{ marginTop: 20 }}
      />
    );
  }
}</syntaxhighlight>


'''مثال''': عرض صفحة ويب عن طريق HTML.

<syntaxhighlight class="react">import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}</syntaxhighlight>
يمكن استخدام هذا العنصر للتنقل بين صفحات الويب داخل التطبيق وضبط خواص معينة لطريقة عرضها. يمكن استخدام الخاصية <code>useWebKit</code> على أنظمة iOS للاشتراك في تنفيذ <code>WKWebView</code>.

'''تحذير''': لا تسمح الخاصيتان <code>onMessage</code> و <code>postMessage</code> حاليًا بتحديد المصادر.هذا يمكن أن يؤدي لحدوث هجمات على الموقع في حال تحميل صفحات غير آمنة عبر المكون <code>WebView</code>. لمزيد من المعلومات حول كيفية الحماية من هذا الأمر انظر [https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage توثيق MDN للدالة <code>Window.postMessage()</code>].
__toc__
== الخاصيّات ==

[https://reactnative.dev/docs/view#props ترث خواص المكون <code>View</code>] .

=== <code>source</code> ===

تعرض صفحة HTML ثابتة أو رابط (URI) (مع ترويسات (headers) اختيارية) عبر المكون <code>WebView</code>. لاحظ أنَّه لعرض صفحات HTML ثابنة يجب وضع القيمة <code>["*"]</code> للخاصية [https://reactnative.dev/docs/webview#originwhitelist <code>originWhiteList</code>] 

'''عرض رابط (URI) داخل التطبيق''':

يجب تحديد المعاملات التالية:

<ul>
<li><p><code>uri</code>: الرابط المراد عرضه على المكون <code>WebView</code>،ويمكن أن يكون رابط خارجي (رابط صفحة موجودة على الويب) أو مسار ملف HTML موجود على جهازك.</p></li>
<li><p><code>method</code>: تُحدد دالة HTTP التي يجب استعمالها، والقيمة الإفتراضية لها هي <code>GET</code>. </p>
<p>'''ملاحظة''': تدعم أجهزة أندرويد الدالتين <code>GET</code> و<code>POST</code> فقط.</p>
<ul>
<li><p><code>headers</code>: ترويسات HTTP اختيارية تُرسل مع الطلب (request).</p>
<p>'''ملاحظة''': تعمل فقط مع الدالة <code>GET</code> على أجهزة أندرويد.</p></li>
<li><p><code>body</code>: تُحدد المتن (HTTP body) الذي سيُرسل مع الطلب، ويجب أن يكون سلسلة نصية بترميز UTF-8، ويُرسل كما هو مكتوب دون أيّ تشفير إضافي ( URL-escaping أو base64). </p>
<p>'''ملاحظة''': يمكن استعمالها مع الدالة <code>POST</code> فقط على أجهزة أندرويد.</p></li></ul>
</li></ul>

'''عرض صفحات HTML ثابتة داخل التطبيق''':

* <code>html</code>: شيفرة HTML تُعرض عبر المكون <code>WebView</code>.
* <code>baseUrl</code>: رابط مرجعي تُنسب إليه جميع الروابط الأخرى في صفحة HTML.

=== <code>automaticallyAdjustContentInsets</code> ===

تتحكم في طريقة عرض المحتوى الواقع خلف شريط التنقل أو شريط التبويب أو شريط الأدوات. القيمة الافتراضية هي <code>true</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| قيمة منطقية (bool)
| لا
|}



=== <code>injectJavaScript</code> ===

دالة تستقبل سلسلة نصية (string) كمعامل يُرسل لاحقًا للمكون <code>WebView</code>، وتُنفَّذ فورًا كجافا سكربت.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}



=== <code>injectedJavaScript</code> ===

تستعمل لاضافة شيفرة جافا سكريبت تُرسل لاحقًا لصفحة الويب عندما يكتمل تحميل إطار العرض.

{| class="wikitable"
! النوع
! مطلوب
|-
| سلسلة نصية (string)
| لا
|}



=== <code>mediaPlaybackRequiredUserAction</code> ===

قيمة منطقية تُحدد ما إذا كانت العناصر الصوتية وأشرطة الفيديو تتطلب الضغط عليها لبدء التشغيل أم لا. القيمة الافتراضية هي <code>true</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| قيمة منطقية (bool)
| لا
|}



=== <code>nativeConfig</code> ===

تُعيد تعريف العنصر الأصلي المُستخدم لعرض المكون <code>WebView</code>. وتتيح عمل <code>WebView</code> مخصص بنفس خصائص المكون الأصلي.

تتلقى هذه الخاصية صنف (object) يحتوي على الخواص: <code>component</code> و<code>props</code> و<code>viewManager</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| object
| لا
|}



=== <code>onError</code> ===

دالة تُستدعَى في حال حدوث خطأ أثناء عرض المكون <code>WebView</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function )
| لا
|}



=== <code>onLoad</code> ===

دالة تُستدعَى عندما يكتمل تحميل المكون <code>WebView</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}



=== <code>onLoadEnd</code> ===

دالة تُستدعَى عندما يكتمل أو يفشل تحميل المكون <code>WebView</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}



=== <code>onLoadStart</code> ===

دالة تُستدعَى عند بدء تحميل المكون <code>WebView</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}



=== <code>onMessage</code> ===

دالة تُستدعَى عندما يستدعي المكون <code>WebView</code> الدالة <code>window.postMessage</code>. يؤدي تفعيل هذه الخاصية لتعميم الدالة <code>postMessage</code> على المكون <code>WebView</code>، ولكن مع ذلك يمكن استدعاء القيم المعرفة مسبقًا للدالة <code>postMessage</code>.

تستقبل الدالة <code>window.postMessage</code> معامل واحد فقط هو السلسلة النصية <code>data</code>، ويمثل البيانات التي سترسل للحدث <code>event.nativeEvent.data</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}



=== <code>onNavigationStateChange</code> ===

دالة تُستدعَى عندما يبدأ أو ينتهي تحميل المكون <code>WebView</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}



=== <code>originWhitelist</code> ===

قائمة جمل (سلاسل نصيَّة) تمثل المصادر أو الاصول المسموح بالتنقل بينها داخل المكون <code>WebView</code> . تُطابق السلاسل النصيَّة مع الأصول المحددة في القائمة فقط وليس مع عنوان URI الكامل. 

إذا انتقل المستخدم لصفحة جديدة ذات أصل (origin) غير موجود في القائمة الآمنة يتم التعامل مع عنوان URL بواسطة نظام التشغيل.

الأصول الافتراضية في القائمة الآمنة هي: <code>http://*</code>و<code>https://*</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| array of strings
| لا
|}



=== <code>renderError</code> ===

دالة تُرجع مكون معين في حالة حدوث خطأ أثناء تحميل المكون <code>WebView</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}



=== <code>renderLoading</code> ===

دالة تُظهر مؤشر تحميل. يجب أن تُعطى الخاصية <code>startInLoadingState</code> القيمة <code>true</code> حتى تتمكن من استخدام هذه الخاصية.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}



=== <code>scalesPageToFit</code> ===

قيمة منطقية تُحدد ما إذا كان مقياس عرض محتوى الويب يتناسب مع حجم شاشة العرض، وتُمكن المستخدم من تحديد مقياس معين لعرض المحتوى. القيمة الافتراضية هي <code>true</code>.

'''ملاحظة''': لن تعمل هذه الخاصية على نظام iOS إذا كانت قيمة الخاصية <code>useWebKit</code> هي <code>true</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}



=== <code>onShouldStartLoadWithRequest</code> ===

دالة تسمح بالتحكم في طلبات عرض عناصر الويب (Web view requests). إرجاع القيمة <code>true</code> من الدالة يعني استمرار تحميل المحتوى من الويب، بينما يعني إرجاع القيمة <code>false</code> ايقاف التحميل.

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| دالة (function)
| لا
| iOS
|}



=== <code>startInLoadingState</code> ===

قيمة منطقية تجبر المكون <code>WebView</code> على إظهار مؤشر تحميل عند أوّل تحميل للصفحة. يجب إعطاء هذه الخاصية القيمة <code>true</code> إذا كنت ترغب في استعمال الخاصية <code>renderLoading</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| قيمة منطقية
| لا
|}



=== <code>decelerationRate</code> ===

قيمة عشرية تُحدد معدل تغير سرعة حركة مؤشر التمرير عندما يرفع المستخدم إصبعه من الشاشة. ويمكن أيضًا استخدام الاختصارات <code>fast</code> و <code>normal</code> المتوافقة مع إعدادات نظام التشغيل iOS الخاصة بـِ <code>UIScrollViewDeclerationRateNormal</code> و <code>UIScrollViewDecelerationRateFast</code> على التوالي. 

* <code>normal</code> = 0.998.
* <code>fast</code> = 0.99 (القيمة الافتراضية في نظام iOS).

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| رقم (number)
| لا
| iOS
|}



=== <code>domStorageEnabled</code> ===

قيمة منطقية تُحدد ما إذا كان تخزين DOM مفعَّل أم لا. تعمل فقط على نظام أندرويد.

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| قيمة منطقية (bool)
| لا
| أندرويد
|}



=== <code>mixedContentMode</code> ===

تُحدد وضع المحتوى المتداخل (mixed content)، أي الذي يأتي من مصادر متداخلة. حيث تسمح للمكون <code>WebView</code> الذي يعرض المحتوى من مصدر آمن بتحميل المحتوى من مصادر أخرى.

'''القيم المتاحة''':

* <code>never</code>: لا تسمح للمكون <code>WebView</code> ذو المصدر الآمن بتحميل المحتوى من مصادر غير آمنة، وهي القيمة الإفتراضية.
* <code>always</code>: تسمح للمكون <code>WebView</code> ذو المصدر الآمن بتحميل المحتوى من أي مصادر أخرى حتى إذا كانت غير آمنة.
* <code>compatibility</code>: يُحاول المكون <code>WebView</code> التوافق مع منهجية المتصفحات الحديثة والتعرف على ما إذا كان المحتوى آمن أم لا.

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| سلسلة نصية (string)
| لا
| أندرويد
|}



=== <code>thirdPartyCookiesEnabled</code> ===

قيمة منطقية تسمح باستخدام ملفات تعريف الارتباط (Cookies) من طرف ثالث في المكون <code>WebView</code>. تُستخدم هذه الخاصية في الإصدار Lollipop من نظام التشغيل أندرويد والإصدارات اللاحقه له، أما في نظام التشغيل iOS والإصدارات التي تسبق الإصدار Lollipop من نظام التشغيل أندرويد، فإنَّ استخدام ملفات تعريف الارتباط من طرف ثالث متاح بشكل افتراضي.

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| قيمة منطقية (bool)
| لا
| أندرويد
|}



=== <code>userAgent</code>  ===

تُحدد <code>user-agent</code> للمكون <code>WebView</code>.

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| سلسلة نصية (string)
| لا
| أندرويد
|}



=== <code>allowsInlineMediaPlayback</code> ===

قيمة منطقية تُحدد ما إذا كانت ملفات الفيديو ستستعمل مُتحكِّم ملء الشاشة الافتراضي. القيمة الإفتراضية لها هي <code>false</code>.

'''ملاحظة''': لتشغيل الفيديوهات بشكل مُضمّن، يلزم إعطاء هذه الخاصية القيمة <code>true</code> وكذلك يجب ان يتضمن عنصر الفيديو في ملف HTML السِمة <code>webkit-playinline</code> .

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| قيمة منطقية (bool)
| لا
| iOS
|}



=== <code>bounces</code> ===

قيمة منطقية تُحدد ما إذا كان عرض الويب سيرتد عندما يصل لنهاية المحتوى. القيمة الافتراضية هي <code>true</code>. 

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| قيمة منطقية (bool)
| لا
| iOS
|}



=== <code>contentInset</code> ===

تُحدد الموضع الذي سيُعرض فيه محتوى الويب عن طريق تحديد إزاحته من الحواف الأربع. القيم الافتراضية هي:

* top: 0
* left: 0
* bottom: 0
* right: 0

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| object: {top: number, left: number, bottom: number, right: number}
| لا
| iOS
|}



=== <code>dataDetectorTypes</code> ===

تُحدد أنواع البيانات في محتوى الويب التي ستُحول إلى روابط يمكن الضغط عليها. بشكل افتراضي يتم التعرف على أرقام الهواتف فقط.

'''القيم المتاحة'''

* <code>phoneNumber</code>
* <code>link</code>
* <code>address</code>
* <code>calenderEvent</code>
* <code>none</code>
* <code>all</code>

أضيفت ثلاث قيم جديدة في التنفيذ الجديد للمكون WebKit` هي:

* <code>trackingNumber</code>
* <code>flightNumber</code>
* <code>lookupSuggestion</code>

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| string or array
| لا
| iOS
|}



=== <code>scollEnabled</code> ===

قيمة منطقية تُحدد ما إذا كان التمرير متاح داخل المكون <code>WebView</code>. القيمة الافتراضية هي <code>true</code>.

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| قيمة منطقية (bool)
| لا
| iOS
|}



<code>getLocationEnabled</code>

تُحدد ما إذا كان تحديد الموقع الجغرافي متاح في المكون <code>WebView</code>. القيمة الافتراضية هي <code>false</code>. 

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| قيمة منطقية (bool)
| لا
| أندرويد
|}



<code>allowUniversalAccessFromFileURLs</code>

قيمة منطقية تُحدد ما إذا كانت شيفرات جافاسكربت التي تعمل في سياق عناوين URL لنظام الملفات مسموح لها بالوصول لمحتويات من جميع الأصول، بما في ذلك الوصول لمحتوى من عناوين URL لنظام الملفات الأخرى. القيمة الافتراضية هي <code>false</code>.

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| قيمة منطقية (bool)
| لا
| أندرويد
|}



=== <code>allowFileAccess</code> ===

قيمة منطقية تُحدد ما إذا كان للمكون <code>WebView</code> وصول لملفات النظام. القيمة الافتراضية هي <code>false</code>.

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| قيمة منطقية (bool)
| لا
| أندرويد
|}



=== <code>useWebKit</code> ===

تستبدل الخاصية <code>UIWebView</code> بالخاصية <code>WKWebView</code>إذا كانت قيمتها <code>true</code>.

{| class="wikitable"
! النوع
! مطلوب
! نظام التشغيل
|-
| قيمة منطقية (bool)
| لا
| iOS
|}



=== <code>url</code> ===

'''خاصية مهملة'''. استعمل الخاصية <code>source</code> بدلًا عنها.

{| class="wikitable"
! النوع
! مطلوب
|-
| سلسلة نصية (string)
| لا
|}



=== <code>html</code> ===

'''خاصية مهملة'''. استعمل الخاصية <code>source</code> بدلًا عنها.

{| class="wikitable"
! النوع
! مطلوب
|-
| سلسلة نصية (string)
| لا
|}



== مرجع الدوال ==

=== <code>extraNativeComponenetConfig</code> ===

<syntaxhighlight class="react">static extraNativeComponenetConfig()</syntaxhighlight>


=== <code>goForward</code> ===

<syntaxhighlight class="react">goForward()</syntaxhighlight>
تستخدم للانتقال للأمام صفحة واحدة في محفوظات عرض الويب.

=== <code>goBackward</code> ===

<syntaxhighlight class="react">goBackward()</syntaxhighlight>
تستخدم للانتقال للخلف صفحة واحدة في محفوظات عرض الويب.



=== <code>reload</code> ===

<syntaxhighlight class="react">reload();</syntaxhighlight>
تُستخدم لإعادة تحميل الصفحة الحالية.



=== <code>stopLoading</code> ===

<syntaxhighlight class="react">stopLoading();</syntaxhighlight>
تُستخدم لإيقاف تحميل الصفحة الحالية.

== المصادر ==

[https://reactnative.dev/docs/webview صفحة WebView في توثيق React Native الرسمي].
[[تصنيف: ReactNative]]