ReactNative/integration with android fragment

الدمج مع جزء Android

يوضح دليل الدمج مع تطبيقات قائمة في React Native كيفية دمج تطبيق React Native بملء الشاشة في تطبيق Android قائم كنشاط. يتطلب استخدام مكونات 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();
            // Packages that cannot be autolinked yet can be added manually here
            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 الجزء إلى تخطيط الإطار.

إن استخدمت مجموعة مشغّل 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 لتثبيت تبعيات ReactNative وتشغيل yarn native لبدء مجمع metro. شغّل تطبيق Android الخاص بك في برنامج Android Studio الذي يجب أن يحمّل شيفرة JavaScript من خادم التطوير وعرضها في الجزء React Native Fragment ضمن النشاط.

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

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

مصادر

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