المكون WebView في ReactNative

مكون مهمل: انظر 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 الرسمي.