كيفية تكوين صداقات تفاعل مع كود Java و React Native على Android

تنشأ الحاجة إلى العمل مع الجزء الأصلي من تطبيق React Native عادةً عندما لا تحتوي الخدمة على واجهة برمجة تطبيقات خاصة لـ RN. وبالتالي ، يجب أن يكون المطور الجيد قادرًا ، على الأقل ، على فهم كيفية عمل الجزء الأصلي من التطبيق. ستقدم هذه المقالة أمثلة على كيفية تفاعل تطبيق React Native مع Android.

الوحدة الأصلية

أولاً ، لنقم بإنشاء فئة جديدة في مجلد android / app / src / main / java ، فئة CustomModule:

package com.awesomeproject;
import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.Map;
import java.util.HashMap;

public class CustomModule extends ReactContextBaseJavaModule {
    CustomModule (ReactApplicationContext context) {
        super(context);
        reactContext = context;
    }

    @Override
    public String getName() {
        return "CustomModule";
    }

    private static ReactApplicationContext context;
}

تحتوي هذه الفئة على طريقة getName () المطلوبة. بالاسم الذي ستعود إليه هذه الطريقة ، يمكنك الوصول إلى الوحدة النمطية الأصلية من كود Javascript (المزيد حول ذلك لاحقًا).

لاحظ أيضًا أن مُنشئ الفئة يأخذ سياق التطبيق كوسيطة. نحتاج إلى سياق التطبيق عندما نريد التفاعل مع مكونات Android.



لنقم بإنشاء طريقة لفئة CustomModule التي سيتم استدعاؤها من كود Javascript:

@ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(context,"Hello world", Toast.LENGTH_LONG).show();
    }

لاحظ أنه لكي تكون الطريقة متاحة في RN ، تحتاج إلى استخدام مصمم الديكور “ReactMethod”.



فئة Toast هي أحد مكونات Android التي يمكنها تشغيل الرسالة المنبثقة من الأسفل باستخدام طريقة show ().

ربط الوحدة بتطبيق Android

بعد إنشاء الوحدة ، يجب وضعها في حزمة ("حزمة").



لنقم بإنشاء حزمة في نفس مساحة الاسم:

package com.awesomeproject;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;

import java.util.Collections;
import java.util.List;

public class CustomPackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new CustomModule(reactContext));
        return modules;
    }

}

تحتوي واجهة "ReactPackage" على طريقتين مطلوبتين: "createNativeModules" و "createViewManagers". عرض مدير في كود RN هو مكون. ستستخدم الوحدة الخاصة بنا وظائف وليست أحد مكونات Android ui ، وبالتالي يتم وضعها في طريقة "createNativeModules".



ملاحظة: يمكن أن تحتوي الحزمة الواحدة على عدة وحدات.



بعد ذلك ، يجب ربط الحزمة بتطبيق Android على النحو التالي:

    //MainApplication.java

@Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      packages.add(new CustomPackage());
      return packages;
    }

استخدام وحدة نمطية في كود جافا سكريبت

لنحاول الآن استدعاء طريقة "show ()" في تطبيق RN:

const App = () => {
  NativeModules.ToastExample.show();
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Text>text</Text>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

نتيجة:

تبادل البيانات بين تطبيقات RN و Android

الآن ، دعنا نتبادل البيانات بين التطبيقات. لنقم بإنشاء طريقتين جديدتين في فئة CustomModule للعثور على المجموع:

      @ReactMethod
    public void sum(int a, int b, Promise res) {
        try {
            res.resolve(a+b);
        } catch (IllegalViewOperationException e) {
            res.resolve(e);
        }
    }

@ReactMethod
    public void sum(float a, float b, Callback success, Callback fail) {
        try {
            success.invoke((a+b));
        } catch (IllegalViewOperationException e) {
            fail.invoke(e.getMessage());
        }
    }

سيأتي المتغيران "a" و "b" من كود Javascript وعليك أن تتذكر تطابق أنواع البيانات بين Java و JS:







ملاحظة: نظرًا لأن نوع الرقم يتوافق مع عدة أنواع من Java في وقت واحد ، فإننا نستخدم زيادة التحميل عن طريق إنشاء طريقتين بنفس الاسم ، ولكنهما مختلفتان أنواع المعلمات.



لإرجاع البيانات إلى كود JS ، تحتوي الوحدة النمطية com.facebook.react.bridge على نوعي Promise و CallBack.



الآن دعنا نستخدم الطريقة في Js:

const showRes = async () => {
const res = NativeModules.SendDataToRN.sum(400, 250);
   alert(res);
};

const App = () => {
   React.useEffect(() => {
	showRes();
   }, [])

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Text>text</Text>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

نتيجة:

خاتمة

يمكن استخدام مواد المقالة في جميع المواقف عندما لا تكون واجهة برمجة التطبيقات لـ rn مكتوبة بعد. كما ترون من الأمثلة ، فإن تبادل البيانات بين التطبيقات عملية بسيطة إلى حد ما لا تتطلب معرفة عميقة ببرمجة Java.