اريد اضافة deep linking لتطبيق React native

يجب عليك إضافة عنصر آخر إلى ملف AndroidManifest.xml لتمكين Deep Linking من التعرف على وسائل تواصل URL المحددة والمسموح بها في التطبيق.

وتستطيع إضافة تحويل الروابط العادية إلى روابط عميقة باستخدام مكتبة "react-native-deep-linking" التي تقدم وظائف لإنشاء روابط عميقة واستخدامها في تطبيق React Native.

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

أولاً ، يجب تثبيت المكتبة باستخدام npm:

npm install --save react-native-deep-linking

ثم استيرادها في ملف JS الخاص بك:

import DeepLinking from 'react-native-deep-linking';

وهناك دالة DeepLinking.addScheme متوفرة لإضافة أسماء الأساليب الخاصة بتطبيقك إلى قائمة الأساليب المسموح بها للاتصال العميق.

DeepLinking.addScheme('mychat://');

ثم استخدام دالة DeepLinking.addRoute لإضافة أنواع معينة من الطرق إلى الأساليب المسموح بها للاتصال العميق.

مثلاً، إذا كنت تريد أن تكون قادرًا على النقر فوق الروابط التي تحتوي على "/chat/" في الرابط لفتح تطبيقك وعرض المحادثات المتعلقة بهذا المستخدم ، يمكنك استخدام هذا الأمر:

DeepLinking.addRoute('/chat/:username', (response) => {
  const username = response.username;
  // Perform the appropriate action based on the username parameter
});

ستعمل هذه الوظيفة عندما يتم النقر على الروابط التي تحتوي على "mychat://chat/jane".

أيضًا، يجب إضافة بعض الأكواد إلى ملف AndroidManifest.xml لتمكين التطبيق من التعرف على الروابط العميقة.

حيث يجب أن تحتوي على وسم <intent-filter> تحت العلامة <activity> في ملف AndroidManifest.xml يحتوي على بيانات الروابط العميقة المراد تمكين التطبيق من التعرف عليها.

وتحديد مجموعة من البيانات المتعلقة بالروابط العميقة مثل البروتوكول، الرابط الأساسي، وأي معلمات إضافية إذا كانت موجودة.

ففي الكود السابق، تم إضافة فلاتر النوايا (intent filters) للاعتراف بالروابط العميقة المرتبطة بـ "mychat" و "www.example.com".

بعد إضافة هذه الفلاتر، عليك باستخدام مكتبة مثل "react-native-deep-link" للتفاعل مع روابط العمليات العميقة في التطبيق، وللتعرف على الروابط العميقة وتحويلها إلى عمليات داخل التطبيق.

كمثال، تستطيع استخدام الكود التالي للاستجابة لروابط العمليات العميقة:

import { Linking } from 'react-native';

Linking.addEventListener('url', (event) => {
  // Handle deep link event
});

تستخدم دالة Linking.addEventListener للاستماع إلى حدث رابط العمليات العميقة، ويمكن استخدام دالة Linking.getInitialURL للتحقق مما إذا كان التطبيق يفتح لأول مرة باستخدام رابط عملية عميقة.

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

يمكنك استخدام المكتبة react-native-deep-linking لإنشاء بروتوكول خاص بتطبيقك وتحويل الروابط إلى روابط داخل التطبيق.

 يجب تثبيت المكتبة كما في التعليق السابق ثم يجب تعريف البروتوكول والـ intent-filter في ملف AndroidManifest.xml وفقًا للتعليمات الموجودة في الدليل الرسمي:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.myapp">

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/AppTheme">

    <activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
      android:launchMode="singleTask"
      android:windowSoftInputMode="adjustResize"
      android:exported="true">

      <!-- Add the following intent filters -->
      <intent-filter android:label="@string/app_name">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <!-- Add your custom scheme here -->
        <data android:scheme="myapp" />
      </intent-filter>

      <!-- Handle deep links -->
      <intent-filter android:label="@string/app_name">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <!-- Add your custom host and path here -->
        <data android:scheme="myapp" android:host="example.com" android:pathPrefix="/path" />
      </intent-filter>

    </activity>
  </application>

</manifest>

ثم يمكنك استخدام المكتبة في تطبيقك كالتالي:

import DeepLinking from 'react-native-deep-linking';

// ...

// Define your deep link handlers
const handleDeepLink = (link) => {
  // Handle the deep link here
  console.log('Deep link:', link);
};

// ...

// Initialize the deep linking library
DeepLinking.addScheme('myapp://');
DeepLinking.addRoute('/path/:id', handleDeepLink);

// Handle incoming deep links
DeepLinking.evaluateUrl();

الآن، عند النقر على رابط myapp://example.com/path/123، سيتم فتح التطبيق بدلاً من المتصفح وتشغيل الدالة handleDeepLink() للتعامل مع الرابط المحدد.