ReactNative/integration with android fragment

يوضح دليل الدمج مع تطبيقات قائمة في React Native كيفية دمج تطبيق React Native يملأ الشاشة في تطبيق Android قائم كنشاط Activity. يتطلّب استخدام مكونات React Native داخل أجزاء Fragments في تطبيق قائم بعضَ الإعدادات الإضافية، وتتمثل فائدة ذلك في أن هذه الإعدادات الإضافية تسمح للتطبيق الأصيل بدمج مكونات React Native مع الأجزاء الأصيلة في نشاط.

الخطوة الأولى: أضف إطار عمل React Native إلى تطبيقك

اتبع دليل الدمج مع التطبيقات القائمة في React Native حتى قسم دمج الشيفرة، ثم استمر في اتباع الخطوة 1 في هذا القسم، وأنشئ ملفًا index.android.js واتبع الخطوة 2 من هذا القسم أيضًا، ثم أضف شيفرة React Native من هذا القسم.

الخطوة الثانية: ادمج تطبيقك مع جزء React Native

يمكنك تصيير مكوّن React Native إلى جزء Fragment بدلًا من نشاط React Native يملأ الشاشة. قد يُطلَق على المكوِّن اسم "شاشة screen" أو "جزء fragment"، وسيعمل بنفس الطريقة التي يعمل بها جزء نظام Android، والذي يُحتمَل أن يحتوي على مكونات أبناء. يمكن وضع هذه المكونات في المجلد ‎/fragments ويمكن وضع المكونات الأبناء المستخدمة في تكوين الجزء ضمن المجلد ‎/components.

ستحتاج إلى تطبيق واجهة ReactApplication في صنف تطبيق Java الرئيسي. إن أنشأت مشروعًا جديدًا من Android Studio مع نشاط افتراضي، فستحتاج إلى إنشاء صنفٍ class جديد كالصنف MyReactApplication.java. إذا كان هذا الصنف موجودًا ، فيمكنك العثور على هذا الصنف الرئيسي في الملف AndroidManifest.xml الخاص بك. يجب أن ترى تحت الوسم ‎<application />‎ خاصية android:name مثل android:name=".MyReactApplication"‎ ، وهذه القيمة هي الصنف التي تريد تطبيقه وتوفير التوابع المطلوبة له.

تأكد من أن صنف تطبيق Java الرئيسي الخاص بك يطبّق واجهة ReactApplication:

public class MyReactApplication extends Application implements ReactApplication {...}

أعِد تعريف Override التوابع getUseDeveloperSupport و getPackages و getReactNativeHost المطلوبة:

public class MyReactApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, false);
    }

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        protected List<ReactPackage> getPackages() {
            List<ReactPackage> packages = new PackageList(this).getPackages();
            // الحزم التي لا يمكن ربطها آليًا يمكن إضافتها يدويًا هنا
            return packages;
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

إن استخدمت بيئة Android Studio ، فاستخدم الاختصار Alt + Enter من لوحة المفاتيح لإضافة جميع ترويسات الاستيراد imports المفقودة في صنفك. يمكنك بدلًا من ذلك تضمين ترويسات الاستيراد المطلوبة التالية يدويًا:

import android.app.Application;

import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.List;

ثم أجرِ عملية "مزامنة ملفات المشروع مع Gradle".

الخطوة الثالثة: أضف FrameLayout لجزء React Native

ستضيف الآن جزء React Native الخاص بك إلى نشاط Activity، إذ سيكون هذا النشاط بالنسبة لمشروع جديد نشاطًا رئيسيًا MainActivity ولكن يمكن أن يكون أي نشاط، ويمكن إضافة المزيد من الأجزاء إلى أنشطة إضافية أثناء دمج المزيد من مكونات React Native إلى تطبيقك.

أضِف أولًا جزء React Native إلى تخطيط نشاطك مثل main_activity.xml في المجلد res/Layouts.

أضف الوسم <FrameLayout> مع معرّف id وعرض وارتفاع، فهذا هو التخطيط الذي ستجده وستصيّر جزء React Native الخاص بك إليه:

<FrameLayout
    android:id="@+id/reactNativeFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

الخطوة الرابعة: أضف جزء React Native إلى FrameLayout

يجب أن يكون لديك نشاط لإضافة جزء React Native إلى التخطيط الخاص بك، وسيكون هذا النشاط نشاطًا رئيسيًا MainActivity في مشروع جديد. أضف زرًا ومستمعًا للأحداث في هذا النشاط، وسيُصيَّر جزء React Native الخاص بك عند النقر فوق الزر.

عدّل تخطيط نشاطك لإضافة الزر كما يلي:

<Button
    android:layout_margin="10dp"
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Show react fragment" />

تحتاج الآن إلى إضافة حدث OnClickListener للزر في صنف النشاط الخاص بك كالصنف MainActivity.java وإنشاء نسخة من الجزء ReactFragment وإضافتها إلى تخطيط الإطار. أضف حقل الزر في أعلى نشاطك كما يلي:

private Button mButton;

حدِّث تابع onCreate الخاص بنشاطك كما يلي:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_activity);

    mButton = findViewById(R.id.button);
    mButton.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            Fragment reactNativeFragment = new ReactFragment.Builder()
                    .setComponentName("HelloWorld")
                    .setLaunchOptions(getLaunchOptions("test message"))
                    .build();

            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.reactNativeFragment, reactNativeFragment)
                    .commit();

        }
    });
}

تنشئ العبارة Fragment reactNativeFragment = new ReactFragment.Builder()‎ الجزء ReactFragment وتضيف العبارة getSupportFragmentManager().beginTransaction().add()‎ الجزء إلى تخطيط الإطار Frame Layout.

إن استخدمت مجموعة مشغّل React Native، فاستبدل سلسلة "HelloWorld" بالسلسلة الموجودة في ملف index.js أو ملف index.android.js (هذه السلسلة هي الوسيط الأول للتابع AppRegistry.registerComponent()‎).

أضف التابع getLaunchOptions الذي يسمح لك بتمرير الخاصيات props إلى المكوّن الخاص بك وهذا أمر اختياري، ويمكنك إزالة التابع setLaunchOptions إن لم تكن بحاجة إلى تمرير أي خاصيات.

private Bundle getLaunchOptions(String message) {
    Bundle initialProperties = new Bundle();
    initialProperties.putString("message", message);
    return initialProperties;
}

أضف جميع ترويسات الاستيراد المفقودة في صنف نشاطك. يجب استخدام الصنف BuildConfig الخاص بحزمتك وليس ذاك الصنف الموجود في حزمة facebook، أو يمكنك تضمين ترويسات الاستيراد المطلوبة التالية يدويًا:

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

ثم أجرِ عملية "مزامنة ملفات المشروع مع Gradle".

الخطوة الخامسة: اختبر الدمج

تأكد من تشغيل yarn لتثبيت اعتماديات react-native وتشغيل الأمر yarn native لبدء مجمع metro. شغّل تطبيق Android الخاص بك في برنامج Android Studio الذي يجب أن يحمّل شيفرة JavaScript من خادم التطوير ويعرضها في الجزء React Native Fragment ضمن النشاط.

الخطوة السادسة: الإعداد الإضافي - الوحدات الأصيلة Native modules

قد تحتاج إلى استدعاء شيفرة Java القائمة من مكون React الخاص بك، وتسمح الوحدات الأصيلة باستدعاء الشيفرة الأصيلة وتشغيل التوابع في تطبيقك الأصيل. اتبع خطوات إعداد الوحدات الأصيلة (Android) في React Native.

مصادر

• صفحة Integration with an Android Fragment في توثيق React Native الرسمي.