الفرق بين المراجعتين ل"ReactNative/webview"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(رفع المحتوى)
 
ط (مراجعة)
 
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:المكون WebView في ReactNative}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:المكون WebView في ReactNative}}</noinclude>
−
'''مكون مهمل''': انظر [https://github.com/react-native-community/react-native-webview react-native-webview].
+
'''مكون مهمل''': اُنظر [https://github.com/react-native-community/react-native-webview react-native-webview].
  
 
يستخدم لعرض صفحات الويب داخل التطبيق.
 
يستخدم لعرض صفحات الويب داخل التطبيق.
سطر 6: سطر 6:
 
'''مثال''': عرض صفحة ويب خارجية.
 
'''مثال''': عرض صفحة ويب خارجية.
  
−
<syntaxhighlight class="react">import React, { Component } from 'react';
+
<syntaxhighlight class="react" lang="javascript">import React, { Component } from 'react';
 
import { WebView } from 'react-native';
 
import { WebView } from 'react-native';
  
سطر 21: سطر 21:
 
   }
 
   }
 
}</syntaxhighlight>
 
}</syntaxhighlight>
−
 
  
 
'''مثال''': عرض صفحة ويب عن طريق HTML.
 
'''مثال''': عرض صفحة ويب عن طريق HTML.
  
−
<syntaxhighlight class="react">import React, { Component } from 'react';
+
<syntaxhighlight class="react" lang="html">import React, { Component } from 'react';
 
import { WebView } from 'react-native';
 
import { WebView } from 'react-native';
  
سطر 38: سطر 37:
 
   }
 
   }
 
}</syntaxhighlight>
 
}</syntaxhighlight>
−
يمكن استخدام هذا العنصر للتنقل بين صفحات الويب داخل التطبيق وضبط خواص معينة لطريقة عرضها. يمكن استخدام الخاصية <code>useWebKit</code> على أنظمة iOS للاشتراك في تنفيذ <code>WKWebView</code>.
+
يمكن استخدام هذا العنصر للتنقل بين صفحات الويب داخل التطبيق وضبط خواص معيّنة لطريقة عرضها. يمكن استخدام الخاصية <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>].
+
'''تحذير''': لا تسمح الخاصيتان <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__
 
__toc__
−
== الخاصيّات ==
+
== الخاصيات ==
  
−
[https://reactnative.dev/docs/view#props ترث خواص المكون <code>View</code>] .
+
ترث خواص المكون <code>[[ReactNative/view|View]]</code> .
  
 
=== <code>source</code> ===
 
=== <code>source</code> ===
  
−
تعرض صفحة HTML ثابتة أو رابط (URI) (مع ترويسات (headers) اختيارية) عبر المكون <code>WebView</code>. لاحظ أنَّه لعرض صفحات HTML ثابنة يجب وضع القيمة <code>["*"]</code> للخاصية [https://reactnative.dev/docs/webview#originwhitelist <code>originWhiteList</code>]
+
تعرض صفحة HTML ثابتة أو رابط (URI) (مع ترويسات (headers) اختيارية) عبر المكون <code>WebView</code>. لاحظ أنَّه لعرض صفحات HTML ثابنة يجب وضع القيمة <code>["*"]</code> للخاصية <code>[[ReactNative/webview#originWhitelist|originWhiteList]]</code>  
  
 
'''عرض رابط (URI) داخل التطبيق''':
 
'''عرض رابط (URI) داخل التطبيق''':
سطر 72: سطر 71:
 
=== <code>automaticallyAdjustContentInsets</code> ===
 
=== <code>automaticallyAdjustContentInsets</code> ===
  
−
تتحكم في طريقة عرض المحتوى الواقع خلف شريط التنقل أو شريط التبويب أو شريط الأدوات. القيمة الافتراضية هي <code>true</code>.
+
تتحكّم في طريقة عرض المحتوى الواقع خلف شريط التنقل أو شريط التبويب أو شريط الأدوات، والقيمة الافتراضية هي <code>true</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 81: سطر 80:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>injectJavaScript</code> ===
 
=== <code>injectJavaScript</code> ===
  
−
دالة تستقبل سلسلة نصية (string) كمعامل يُرسل لاحقًا للمكون <code>WebView</code>، وتُنفَّذ فورًا كجافا سكربت.
+
دالة تستقبل سلسلةً نصية (string) في صورة معامل يُرسل لاحقًا للمكون <code>WebView</code>، وتُنفَّذ فورًا مثل جافا سكربت.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 95: سطر 91:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>injectedJavaScript</code> ===
 
=== <code>injectedJavaScript</code> ===
  
سطر 109: سطر 102:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>mediaPlaybackRequiredUserAction</code> ===
 
=== <code>mediaPlaybackRequiredUserAction</code> ===
  
سطر 123: سطر 113:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>nativeConfig</code> ===
 
=== <code>nativeConfig</code> ===
  
−
تُعيد تعريف العنصر الأصلي المُستخدم لعرض المكون <code>WebView</code>. وتتيح عمل <code>WebView</code> مخصص بنفس خصائص المكون الأصلي.
+
تُعيد تعريف العنصر الأصلي المُستخدم لعرض المكون <code>WebView</code>. وتتيح عمل <code>WebView</code> مخصّص بنفس خصائص المكون الأصلي.
  
 
تتلقى هذه الخاصية صنف (object) يحتوي على الخواص: <code>component</code> و<code>props</code> و<code>viewManager</code>.
 
تتلقى هذه الخاصية صنف (object) يحتوي على الخواص: <code>component</code> و<code>props</code> و<code>viewManager</code>.
سطر 139: سطر 126:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>onError</code> ===
 
=== <code>onError</code> ===
  
سطر 153: سطر 137:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>onLoad</code> ===
 
=== <code>onLoad</code> ===
  
سطر 167: سطر 148:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>onLoadEnd</code> ===
 
=== <code>onLoadEnd</code> ===
  
سطر 181: سطر 159:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>onLoadStart</code> ===
 
=== <code>onLoadStart</code> ===
  
سطر 195: سطر 170:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>onMessage</code> ===
 
=== <code>onMessage</code> ===
  
سطر 211: سطر 183:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>onNavigationStateChange</code> ===
 
=== <code>onNavigationStateChange</code> ===
  
سطر 225: سطر 194:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>originWhitelist</code> ===
 
=== <code>originWhitelist</code> ===
  
−
قائمة جمل (سلاسل نصيَّة) تمثل المصادر أو الاصول المسموح بالتنقل بينها داخل المكون <code>WebView</code> . تُطابق السلاسل النصيَّة مع الأصول المحددة في القائمة فقط وليس مع عنوان URI الكامل.  
+
قائمة جمل (سلاسل نصيَّة) تمثل المصادر أو الأصول المسموح بالتنقل بينها داخل المكوّن <code>WebView</code>، وتُطابق السلاسل النصيَّة مع الأصول المحدّدة في القائمة فقط وليس مع عنوان URI الكامل.  
  
−
إذا انتقل المستخدم لصفحة جديدة ذات أصل (origin) غير موجود في القائمة الآمنة يتم التعامل مع عنوان URL بواسطة نظام التشغيل.
+
إذا انتقل المستخدِم لصفحة جديدة ذات أصل (origin) غير موجود في القائمة الآمنة فسيُتعامل مع عنوان URL بواسطة نظام التشغيل.
  
−
الأصول الافتراضية في القائمة الآمنة هي: <code>http://*</code>و<code>https://*</code>.
+
الأصول الافتراضية في القائمة الآمنة هي: <code><nowiki>http://*</nowiki></code>و<code><nowiki>https://*</nowiki></code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 243: سطر 209:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>renderError</code> ===
 
=== <code>renderError</code> ===
  
−
دالة تُرجع مكون معين في حالة حدوث خطأ أثناء تحميل المكون <code>WebView</code>.
+
دالة تُرجع مكونًا معينًا في حالة حدوث خطأ أثناء تحميل المكون <code>WebView</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 257: سطر 220:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>renderLoading</code> ===
 
=== <code>renderLoading</code> ===
  
−
دالة تُظهر مؤشر تحميل. يجب أن تُعطى الخاصية <code>startInLoadingState</code> القيمة <code>true</code> حتى تتمكن من استخدام هذه الخاصية.
+
دالة تُظهر مؤشّر تحميل، يجب أن تُعطى الخاصية <code>startInLoadingState</code> القيمة <code>true</code> حتى تتمكّن من استخدام هذه الخاصية.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 271: سطر 231:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>scalesPageToFit</code> ===
 
=== <code>scalesPageToFit</code> ===
  
سطر 287: سطر 244:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>onShouldStartLoadWithRequest</code> ===
 
=== <code>onShouldStartLoadWithRequest</code> ===
  
سطر 303: سطر 257:
 
| iOS
 
| iOS
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>startInLoadingState</code> ===
 
=== <code>startInLoadingState</code> ===
  
−
قيمة منطقية تجبر المكون <code>WebView</code> على إظهار مؤشر تحميل عند أوّل تحميل للصفحة. يجب إعطاء هذه الخاصية القيمة <code>true</code> إذا كنت ترغب في استعمال الخاصية <code>renderLoading</code>.
+
قيمة منطقية تُجبِر المكون <code>WebView</code> على إظهار مؤشر تحميل عند أوّل تحميل للصفحة، ويجب إعطاء هذه الخاصية القيمة <code>true</code> إذا كنت ترغب في استعمال الخاصية <code>renderLoading</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 317: سطر 268:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>decelerationRate</code> ===
 
=== <code>decelerationRate</code> ===
  
−
قيمة عشرية تُحدد معدل تغير سرعة حركة مؤشر التمرير عندما يرفع المستخدم إصبعه من الشاشة. ويمكن أيضًا استخدام الاختصارات <code>fast</code> و <code>normal</code> المتوافقة مع إعدادات نظام التشغيل iOS الخاصة بـِ <code>UIScrollViewDeclerationRateNormal</code> و <code>UIScrollViewDecelerationRateFast</code> على التوالي.  
+
قيمة عشرية تُحدد معدَّل تغيُّر سرعة حركة مؤشر التمرير عندما يرفع المستخدم إصبعه من الشاشة. ويمكن أيضًا استخدام الاختصارات <code>fast</code> و<code>normal</code> المتوافقة مع إعدادات نظام التشغيل iOS الخاصة بـِ <code>UIScrollViewDeclerationRateNormal</code> و<code>UIScrollViewDecelerationRateFast</code> على التوالي.  
  
 
* <code>normal</code> = 0.998.
 
* <code>normal</code> = 0.998.
سطر 332: سطر 280:
 
! نظام التشغيل
 
! نظام التشغيل
 
|-
 
|-
−
| رقم (number)
+
| عدد (number)
 
| لا
 
| لا
 
| iOS
 
| iOS
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>domStorageEnabled</code> ===
 
=== <code>domStorageEnabled</code> ===
  
سطر 352: سطر 297:
 
| أندرويد
 
| أندرويد
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>mixedContentMode</code> ===
 
=== <code>mixedContentMode</code> ===
  
سطر 362: سطر 304:
  
 
* <code>never</code>: لا تسمح للمكون <code>WebView</code> ذو المصدر الآمن بتحميل المحتوى من مصادر غير آمنة، وهي القيمة الإفتراضية.
 
* <code>never</code>: لا تسمح للمكون <code>WebView</code> ذو المصدر الآمن بتحميل المحتوى من مصادر غير آمنة، وهي القيمة الإفتراضية.
−
* <code>always</code>: تسمح للمكون <code>WebView</code> ذو المصدر الآمن بتحميل المحتوى من أي مصادر أخرى حتى إذا كانت غير آمنة.
+
* <code>always</code>: تسمح للمكون <code>WebView</code> ذو المصدر الآمن بتحميل المحتوى من أيّ مصادر أخرى حتى إذا كانت غير آمنة.
−
* <code>compatibility</code>: يُحاول المكون <code>WebView</code> التوافق مع منهجية المتصفحات الحديثة والتعرف على ما إذا كان المحتوى آمن أم لا.
+
* <code>compatibility</code>: يُحاول المكون <code>WebView</code> التوافق مع منهجية المتصفحات الحديثة والتعرف على ما إذا كان المحتوى آمنًا أم لا.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 374: سطر 316:
 
| أندرويد
 
| أندرويد
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>thirdPartyCookiesEnabled</code> ===
 
=== <code>thirdPartyCookiesEnabled</code> ===
  
−
قيمة منطقية تسمح باستخدام ملفات تعريف الارتباط (Cookies) من طرف ثالث في المكون <code>WebView</code>. تُستخدم هذه الخاصية في الإصدار Lollipop من نظام التشغيل أندرويد والإصدارات اللاحقه له، أما في نظام التشغيل iOS والإصدارات التي تسبق الإصدار Lollipop من نظام التشغيل أندرويد، فإنَّ استخدام ملفات تعريف الارتباط من طرف ثالث متاح بشكل افتراضي.
+
قيمة منطقية تسمح باستخدام ملفّات تعريف الارتباط (Cookies) من طرف ثالث في المكون <code>WebView</code>. تُستخدم هذه الخاصية في الإصدار Lollipop من نظام التشغيل أندرويد والإصدارات اللاحقه له؛ أمّا في نظام التشغيل iOS والإصدارات التي تسبق الإصدار Lollipop من نظام التشغيل أندرويد، فاستخدام ملفّات تعريف الارتباط من طرف ثالث متاح افتراضيًا.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 390: سطر 329:
 
| أندرويد
 
| أندرويد
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>userAgent</code>  ===
 
=== <code>userAgent</code>  ===
  
−
تُحدد <code>user-agent</code> للمكون <code>WebView</code>.
+
تُحدّد <code>user-agent</code> للمكون <code>WebView</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 406: سطر 342:
 
| أندرويد
 
| أندرويد
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>allowsInlineMediaPlayback</code> ===
 
=== <code>allowsInlineMediaPlayback</code> ===
  
−
قيمة منطقية تُحدد ما إذا كانت ملفات الفيديو ستستعمل مُتحكِّم ملء الشاشة الافتراضي. القيمة الإفتراضية لها هي <code>false</code>.
+
قيمة منطقية تُحدّد ما إذا كانت ملفّات الفيديو ستستعمل مُتحكِّم ملء الشاشة الافتراضي، والقيمة الإفتراضية لها هي <code>false</code>.
  
−
'''ملاحظة''': لتشغيل الفيديوهات بشكل مُضمّن، يلزم إعطاء هذه الخاصية القيمة <code>true</code> وكذلك يجب ان يتضمن عنصر الفيديو في ملف HTML السِمة <code>webkit-playinline</code> .
+
'''ملاحظة''': لتشغيل الفيديوهات بطريقة مُضمّنة، يلزم إعطاء هذه الخاصية القيمة <code>true</code> كما يجب تضمُّن عنصر الفيديو في ملف HTML السِمة <code>webkit-playinline</code> .
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 424: سطر 357:
 
| iOS
 
| iOS
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>bounces</code> ===
 
=== <code>bounces</code> ===
  
−
قيمة منطقية تُحدد ما إذا كان عرض الويب سيرتد عندما يصل لنهاية المحتوى. القيمة الافتراضية هي <code>true</code>.  
+
قيمة منطقية تُحدِّد ما إذا كان عرض الويب سيرتد عندما يصل لنهاية المحتوى، والقيمة الافتراضية هي <code>true</code>.  
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 440: سطر 370:
 
| iOS
 
| iOS
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>contentInset</code> ===
 
=== <code>contentInset</code> ===
  
سطر 457: سطر 384:
 
! نظام التشغيل
 
! نظام التشغيل
 
|-
 
|-
−
| object: {top: number, left: number, bottom: number, right: number}
+
| ‪object: {top: number, left: number, bottom: number, right: number}
 
| لا
 
| لا
 
| iOS
 
| iOS
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>dataDetectorTypes</code> ===
 
=== <code>dataDetectorTypes</code> ===
  
−
تُحدد أنواع البيانات في محتوى الويب التي ستُحول إلى روابط يمكن الضغط عليها. بشكل افتراضي يتم التعرف على أرقام الهواتف فقط.
+
تُحدد أنواع البيانات في محتوى الويب التي ستُحول إلى روابط يمكن الضغط عليها، ويُتعرّف افتراضيًا على أرقام الهواتف فقط.
  
 
'''القيم المتاحة'''
 
'''القيم المتاحة'''
سطر 477: سطر 401:
 
* <code>all</code>
 
* <code>all</code>
  
−
أضيفت ثلاث قيم جديدة في التنفيذ الجديد للمكون WebKit` هي:
+
أضيفت ثلاث قيم جديدة في التنفيذ الجديد للمكون <code>WebKit</code> هي:
  
 
* <code>trackingNumber</code>
 
* <code>trackingNumber</code>
سطر 492: سطر 416:
 
| iOS
 
| iOS
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>scollEnabled</code> ===
 
=== <code>scollEnabled</code> ===
  
سطر 507: سطر 428:
 
| لا
 
| لا
 
| iOS
 
| iOS
−
|}
+
|}<code>getLocationEnabled</code>
−
 
 
−
 
 
−
 
 
−
<code>getLocationEnabled</code>
 
  
 
تُحدد ما إذا كان تحديد الموقع الجغرافي متاح في المكون <code>WebView</code>. القيمة الافتراضية هي <code>false</code>.  
 
تُحدد ما إذا كان تحديد الموقع الجغرافي متاح في المكون <code>WebView</code>. القيمة الافتراضية هي <code>false</code>.  
سطر 523: سطر 440:
 
| لا
 
| لا
 
| أندرويد
 
| أندرويد
−
|}
+
|}<code>allowUniversalAccessFromFileURLs</code>
−
 
 
−
 
 
  
−
<code>allowUniversalAccessFromFileURLs</code>
+
قيمة منطقية تُحدد ما إذا كانت شيفرات [[JavaScript|جافاسكربت]] التي تعمل في سياق عناوين URL لنظام الملفات مسموح لها بالوصول لمحتويات من جميع الأصول، بما في ذلك الوصول لمحتوى من عناوين URL لنظام الملفات الأخرى. القيمة الافتراضية هي <code>false</code>.
−
 
 
−
قيمة منطقية تُحدد ما إذا كانت شيفرات جافاسكربت التي تعمل في سياق عناوين URL لنظام الملفات مسموح لها بالوصول لمحتويات من جميع الأصول، بما في ذلك الوصول لمحتوى من عناوين URL لنظام الملفات الأخرى. القيمة الافتراضية هي <code>false</code>.
 
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 540: سطر 453:
 
| أندرويد
 
| أندرويد
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>allowFileAccess</code> ===
 
=== <code>allowFileAccess</code> ===
  
−
قيمة منطقية تُحدد ما إذا كان للمكون <code>WebView</code> وصول لملفات النظام. القيمة الافتراضية هي <code>false</code>.
+
قيمة منطقية تُحدد ما إذا كان للمكون <code>WebView</code> وصول لملفّات النظام. القيمة الافتراضية هي <code>false</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 556: سطر 466:
 
| أندرويد
 
| أندرويد
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>useWebKit</code> ===
 
=== <code>useWebKit</code> ===
  
سطر 572: سطر 479:
 
| iOS
 
| iOS
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>url</code> ===
 
=== <code>url</code> ===
  
−
'''خاصية مهملة'''. استعمل الخاصية <code>source</code> بدلًا عنها.
+
'''خاصية مهملة'''. يمكنك استعمال الخاصية <code>source</code> بدلًا عنها.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 586: سطر 490:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
=== <code>html</code> ===
 
=== <code>html</code> ===
  
−
'''خاصية مهملة'''. استعمل الخاصية <code>source</code> بدلًا عنها.
+
'''خاصية مهملة'''. يمكنك استعمال الخاصية <code>source</code> بدلًا عنها.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 600: سطر 501:
 
| لا
 
| لا
 
|}
 
|}
−
 
−
 
−
 
 
== مرجع الدوال ==
 
== مرجع الدوال ==
  
 
=== <code>extraNativeComponenetConfig</code> ===
 
=== <code>extraNativeComponenetConfig</code> ===
  
−
<syntaxhighlight class="react">static extraNativeComponenetConfig()</syntaxhighlight>
+
<syntaxhighlight class="react" lang="javascript">static extraNativeComponenetConfig()</syntaxhighlight>
−
 
 
−
 
 
 
=== <code>goForward</code> ===
 
=== <code>goForward</code> ===
  
−
<syntaxhighlight class="react">goForward()</syntaxhighlight>
+
<syntaxhighlight class="react" lang="javascript">goForward()</syntaxhighlight>
 
تستخدم للانتقال للأمام صفحة واحدة في محفوظات عرض الويب.
 
تستخدم للانتقال للأمام صفحة واحدة في محفوظات عرض الويب.
  
 
=== <code>goBackward</code> ===
 
=== <code>goBackward</code> ===
  
−
<syntaxhighlight class="react">goBackward()</syntaxhighlight>
+
<syntaxhighlight class="react" lang="javascript">goBackward()</syntaxhighlight>
 
تستخدم للانتقال للخلف صفحة واحدة في محفوظات عرض الويب.
 
تستخدم للانتقال للخلف صفحة واحدة في محفوظات عرض الويب.
−
 
−
 
−
 
 
=== <code>reload</code> ===
 
=== <code>reload</code> ===
  
−
<syntaxhighlight class="react">reload();</syntaxhighlight>
+
<syntaxhighlight class="react" lang="javascript">reload();</syntaxhighlight>
 
تُستخدم لإعادة تحميل الصفحة الحالية.
 
تُستخدم لإعادة تحميل الصفحة الحالية.
−
 
−
 
−
 
 
=== <code>stopLoading</code> ===
 
=== <code>stopLoading</code> ===
  
−
<syntaxhighlight class="react">stopLoading();</syntaxhighlight>
+
<syntaxhighlight class="react" lang="javascript">stopLoading();</syntaxhighlight>
 
تُستخدم لإيقاف تحميل الصفحة الحالية.
 
تُستخدم لإيقاف تحميل الصفحة الحالية.
  

المراجعة الحالية بتاريخ 07:17، 5 مارس 2021

مكون مهمل: اُنظر react-native-webview.

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

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

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 }}
      />
    );
  }
}

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

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

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}

يمكن استخدام هذا العنصر للتنقل بين صفحات الويب داخل التطبيق وضبط خواص معيّنة لطريقة عرضها. يمكن استخدام الخاصية useWebKit على أنظمة iOS للاشتراك في تنفيذ WKWebView.

تحذير: لا تسمح الخاصيتان onMessage وpostMessage حاليًا بتحديد المصادر، وهذا قد يؤدّي لحدوث هجمات على الموقع في حال تحميل صفحات غير آمنة عبر المكون WebView. لمزيد من المعلومات حول كيفية الحماية من هذا الأمر انظر توثيق MDN للدالة Window.postMessage().

الخاصيات

ترث خواص المكون View .

source

تعرض صفحة HTML ثابتة أو رابط (URI) (مع ترويسات (headers) اختيارية) عبر المكون WebView. لاحظ أنَّه لعرض صفحات HTML ثابنة يجب وضع القيمة ["*"] للخاصية originWhiteList

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

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

  • uri: الرابط المراد عرضه على المكون WebView،ويمكن أن يكون رابط خارجي (رابط صفحة موجودة على الويب) أو مسار ملف HTML موجود على جهازك.

  • method: تُحدد دالة HTTP التي يجب استعمالها، والقيمة الإفتراضية لها هي GET.

    ملاحظة: تدعم أجهزة أندرويد الدالتين GET وPOST فقط.

    • headers: ترويسات HTTP اختيارية تُرسل مع الطلب (request).

      ملاحظة: تعمل فقط مع الدالة GET على أجهزة أندرويد.

    • body: تُحدد المتن (HTTP body) الذي سيُرسل مع الطلب، ويجب أن يكون سلسلة نصية بترميز UTF-8، ويُرسل كما هو مكتوب دون أيّ تشفير إضافي ( URL-escaping أو base64).

      ملاحظة: يمكن استعمالها مع الدالة POST فقط على أجهزة أندرويد.

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

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

automaticallyAdjustContentInsets

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

النوع مطلوب
قيمة منطقية (bool) لا

injectJavaScript

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

النوع مطلوب
دالة (function) لا

injectedJavaScript

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

النوع مطلوب
سلسلة نصية (string) لا

mediaPlaybackRequiredUserAction

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

النوع مطلوب
قيمة منطقية (bool) لا

nativeConfig

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

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

النوع مطلوب
object لا

onError

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

النوع مطلوب
دالة (function ) لا

onLoad

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

النوع مطلوب
دالة (function) لا

onLoadEnd

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

النوع مطلوب
دالة (function) لا

onLoadStart

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

النوع مطلوب
دالة (function) لا

onMessage

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

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

النوع مطلوب
دالة (function) لا

onNavigationStateChange

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

النوع مطلوب
دالة (function) لا

originWhitelist

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

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

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

النوع مطلوب
array of strings لا

renderError

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

النوع مطلوب
دالة (function) لا

renderLoading

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

النوع مطلوب
دالة (function) لا

scalesPageToFit

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

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

النوع مطلوب
دالة (function) لا

onShouldStartLoadWithRequest

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

النوع مطلوب نظام التشغيل
دالة (function) لا iOS

startInLoadingState

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

النوع مطلوب
قيمة منطقية لا

decelerationRate

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

  • normal = 0.998.
  • fast = 0.99 (القيمة الافتراضية في نظام iOS).
النوع مطلوب نظام التشغيل
عدد (number) لا iOS

domStorageEnabled

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

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا أندرويد

mixedContentMode

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

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

  • never: لا تسمح للمكون WebView ذو المصدر الآمن بتحميل المحتوى من مصادر غير آمنة، وهي القيمة الإفتراضية.
  • always: تسمح للمكون WebView ذو المصدر الآمن بتحميل المحتوى من أيّ مصادر أخرى حتى إذا كانت غير آمنة.
  • compatibility: يُحاول المكون WebView التوافق مع منهجية المتصفحات الحديثة والتعرف على ما إذا كان المحتوى آمنًا أم لا.
النوع مطلوب نظام التشغيل
سلسلة نصية (string) لا أندرويد

thirdPartyCookiesEnabled

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

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا أندرويد

userAgent

تُحدّد user-agent للمكون WebView.

النوع مطلوب نظام التشغيل
سلسلة نصية (string) لا أندرويد

allowsInlineMediaPlayback

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

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

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا iOS

bounces

قيمة منطقية تُحدِّد ما إذا كان عرض الويب سيرتد عندما يصل لنهاية المحتوى، والقيمة الافتراضية هي true.

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا iOS

contentInset

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

  • top: 0
  • left: 0
  • bottom: 0
  • right: 0
النوع مطلوب نظام التشغيل
‪object: {top: number, left: number, bottom: number, right: number} لا iOS

dataDetectorTypes

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

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

  • phoneNumber
  • link
  • address
  • calenderEvent
  • none
  • all

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

  • trackingNumber
  • flightNumber
  • lookupSuggestion
النوع مطلوب نظام التشغيل
string or array لا iOS

scollEnabled

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

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا iOS

getLocationEnabled

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

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا أندرويد

allowUniversalAccessFromFileURLs

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

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا أندرويد

allowFileAccess

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

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا أندرويد

useWebKit

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

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا iOS

url

خاصية مهملة. يمكنك استعمال الخاصية source بدلًا عنها.

النوع مطلوب
سلسلة نصية (string) لا

html

خاصية مهملة. يمكنك استعمال الخاصية source بدلًا عنها.

النوع مطلوب
سلسلة نصية (string) لا

مرجع الدوال

extraNativeComponenetConfig

static extraNativeComponenetConfig()

goForward

goForward()

تستخدم للانتقال للأمام صفحة واحدة في محفوظات عرض الويب.

goBackward

goBackward()

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

reload

reload();

تُستخدم لإعادة تحميل الصفحة الحالية.

stopLoading

stopLoading();

تُستخدم لإيقاف تحميل الصفحة الحالية.

المصادر

صفحة WebView في توثيق React Native الرسمي.

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/webview&oldid=30362"