الفرق بين المراجعتين ل"ReactNative/integration with android fragment"
سطر 1: | سطر 1: | ||
== الدمج مع جزء Android == | == الدمج مع جزء Android == | ||
− | يوضح دليل [[ReactNative/integration with existing apps|الدمج مع تطبيقات قائمة في React Native]] كيفية دمج تطبيق [[ReactNative|React Native]] | + | يوضح دليل [[ReactNative/integration with existing apps|الدمج مع تطبيقات قائمة في React Native]] كيفية دمج تطبيق [[ReactNative|React Native]] يملأ الشاشة في تطبيق Android قائم كنشاط Activity. يتطلّب استخدام مكونات React Native داخل أجزاء Fragments في تطبيق قائم بعضَ الإعدادات الإضافية، وتتمثل فائدة ذلك في أن هذه الإعدادات الإضافية تسمح للتطبيق الأصيل بدمج مكونات React Native مع الأجزاء الأصيلة في نشاط. |
=== الخطوة الأولى: أضف إطار عمل React Native إلى تطبيقك === | === الخطوة الأولى: أضف إطار عمل React Native إلى تطبيقك === | ||
سطر 6: | سطر 6: | ||
=== الخطوة الثانية: ادمج تطبيقك مع جزء React Native === | === الخطوة الثانية: ادمج تطبيقك مع جزء React Native === | ||
− | يمكنك | + | يمكنك تصيير مكوّن React Native إلى جزء Fragment بدلًا من نشاط React Native يملأ الشاشة. قد يُطلَق على المكوِّن اسم "شاشة screen" أو "جزء fragment"، وسيعمل بنفس الطريقة التي يعمل بها جزء نظام Android، والذي يُحتمَل أن يحتوي على مكونات أبناء. يمكن وضع هذه المكونات في المجلد <code>fragments/</code> ويمكن وضع المكونات الأبناء المستخدمة في تكوين الجزء ضمن المجلد <code>Components/</code>. |
ستحتاج إلى تطبيق واجهة ReactApplication في صنف تطبيق Java الرئيسي. إن أنشأت مشروعًا جديدًا من Android Studio مع نشاط افتراضي، فستحتاج إلى إنشاء صنفٍ class جديد كالصنف <code>MyReactApplication.java</code>. إذا كان هذا الصنف موجودًا ، فيمكنك العثور على هذا الصنف الرئيسي في الملف <code>AndroidManifest.xml</code> الخاص بك. يجب أن ترى تحت الوسم <code></ application></code> خاصية <code>android:name</code> مثل <code>"android:name=".MyReactApplication</code> ، وهذه القيمة هي الصنف التي تريد تطبيقه وتوفير التوابع المطلوبة له. | ستحتاج إلى تطبيق واجهة ReactApplication في صنف تطبيق Java الرئيسي. إن أنشأت مشروعًا جديدًا من Android Studio مع نشاط افتراضي، فستحتاج إلى إنشاء صنفٍ class جديد كالصنف <code>MyReactApplication.java</code>. إذا كان هذا الصنف موجودًا ، فيمكنك العثور على هذا الصنف الرئيسي في الملف <code>AndroidManifest.xml</code> الخاص بك. يجب أن ترى تحت الوسم <code></ application></code> خاصية <code>android:name</code> مثل <code>"android:name=".MyReactApplication</code> ، وهذه القيمة هي الصنف التي تريد تطبيقه وتوفير التوابع المطلوبة له. | ||
− | تأكد من أن صنف تطبيق Java الرئيسي | + | تأكد من أن صنف تطبيق Java الرئيسي الخاص بك يطبّق واجهة ReactApplication:<syntaxhighlight lang="javascript"> |
public class MyReactApplication extends Application implements ReactApplication {...} | public class MyReactApplication extends Application implements ReactApplication {...} | ||
− | </syntaxhighlight>أعِد تعريف Override التوابع | + | </syntaxhighlight>أعِد تعريف Override التوابع <code>getUseDeveloperSupport</code> و <code>getPackages</code> و <code>getReactNativeHost</code> المطلوبة:<syntaxhighlight lang="javascript"> |
public class MyReactApplication extends Application implements ReactApplication { | public class MyReactApplication extends Application implements ReactApplication { | ||
@Override | @Override | ||
سطر 28: | سطر 28: | ||
protected List<ReactPackage> getPackages() { | protected List<ReactPackage> getPackages() { | ||
List<ReactPackage> packages = new PackageList(this).getPackages(); | List<ReactPackage> packages = new PackageList(this).getPackages(); | ||
− | // | + | // الحزم التي لا يمكن ربطها آليًا يمكن إضافتها يدويًا هنا |
return packages; | return packages; | ||
} | } | ||
سطر 38: | سطر 38: | ||
} | } | ||
} | } | ||
− | </syntaxhighlight>إن استخدمت | + | </syntaxhighlight>إن استخدمت بيئة Android Studio ، فاستخدم الاختصار <code>Alt + Enter</code> من لوحة المفاتيح لإضافة جميع ترويسات الاستيراد imports المفقودة في صنفك. يمكنك بدلًا من ذلك تضمين ترويسات الاستيراد المطلوبة التالية يدويًا:<syntaxhighlight lang="javascript"> |
import android.app.Application; | import android.app.Application; | ||
سطر 51: | سطر 51: | ||
=== الخطوة الثالثة: أضف FrameLayout لجزء React Native === | === الخطوة الثالثة: أضف FrameLayout لجزء React Native === | ||
− | ستضيف الآن جزء React Native الخاص بك إلى نشاط Activity، إذ سيكون هذا النشاط بالنسبة لمشروع جديد <code>MainActivity</code> ولكن يمكن أن يكون أي نشاط، ويمكن إضافة المزيد من الأجزاء إلى أنشطة إضافية أثناء دمج المزيد من مكونات React Native إلى تطبيقك. | + | ستضيف الآن جزء React Native الخاص بك إلى نشاط Activity، إذ سيكون هذا النشاط بالنسبة لمشروع جديد نشاطًا رئيسيًا <code>MainActivity</code> ولكن يمكن أن يكون أي نشاط، ويمكن إضافة المزيد من الأجزاء إلى أنشطة إضافية أثناء دمج المزيد من مكونات React Native إلى تطبيقك. |
أضِف أولًا جزء React Native إلى تخطيط نشاطك مثل <code>main_activity.xml</code> في المجلد <code>res/Layouts</code>. | أضِف أولًا جزء React Native إلى تخطيط نشاطك مثل <code>main_activity.xml</code> في المجلد <code>res/Layouts</code>. | ||
− | أضف الوسم <code><FrameLayout></code> مع معرّف id | + | أضف الوسم <code><FrameLayout></code> مع معرّف id وعرض وارتفاع، فهذا هو التخطيط الذي ستجده وستصيّر جزء React Native الخاص بك إليه:<syntaxhighlight lang="javascript"> |
<FrameLayout | <FrameLayout | ||
android:id="@+id/reactNativeFragment" | android:id="@+id/reactNativeFragment" | ||
سطر 62: | سطر 62: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | === الخطوة الرابعة: أضف جزء | + | === الخطوة الرابعة: أضف جزء React Native إلى FrameLayout === |
− | يجب أن يكون لديك نشاط لإضافة جزء React Native إلى التخطيط الخاص بك، وسيكون هذا النشاط | + | يجب أن يكون لديك نشاط لإضافة جزء React Native إلى التخطيط الخاص بك، وسيكون هذا النشاط نشاطًا رئيسيًا <code>MainActivity</code> في مشروع جديد. أضف زرًا ومستمعًا للأحداث في هذا النشاط، وسيُصيَّر جزء React Native الخاص بك عند النقر فوق الزر. |
عدّل تخطيط نشاطك لإضافة الزر كما يلي:<syntaxhighlight lang="javascript"> | عدّل تخطيط نشاطك لإضافة الزر كما يلي:<syntaxhighlight lang="javascript"> | ||
سطر 72: | سطر 72: | ||
android:layout_height="wrap_content" | android:layout_height="wrap_content" | ||
android:text="Show react fragment" /> | android:text="Show react fragment" /> | ||
− | </syntaxhighlight>تحتاج الآن إلى إضافة OnClickListener للزر في صنف النشاط | + | </syntaxhighlight>تحتاج الآن إلى إضافة حدث OnClickListener للزر في صنف النشاط الخاص بك كالصنف <code>MainActivity.java</code> وإنشاء نسخة من الجزء ReactFragment وإضافتها إلى تخطيط الإطار. |
− | أضف حقل الزر في أعلى نشاطك:<syntaxhighlight lang="javascript"> | + | أضف حقل الزر في أعلى نشاطك كما يلي:<syntaxhighlight lang="javascript"> |
private Button mButton; | private Button mButton; | ||
− | </syntaxhighlight> | + | </syntaxhighlight>حدِّث تابع onCreate الخاص بنشاطك كما يلي:<syntaxhighlight lang="javascript"> |
@Override | @Override | ||
protected void onCreate(Bundle savedInstanceState) { | protected void onCreate(Bundle savedInstanceState) { | ||
سطر 98: | سطر 98: | ||
}); | }); | ||
} | } | ||
− | </syntaxhighlight>تنشئ العبارة <code>()Fragment reactNativeFragment = new ReactFragment.Builder</code> الجزء ReactFragment وتضيف العبارة <code>()getSupportFragmentManager().beginTransaction().add</code> الجزء إلى تخطيط الإطار. | + | </syntaxhighlight>تنشئ العبارة <code>()Fragment reactNativeFragment = new ReactFragment.Builder</code> الجزء ReactFragment وتضيف العبارة <code>()getSupportFragmentManager().beginTransaction().add</code> الجزء إلى تخطيط الإطار Frame Layout. |
إن استخدمت مجموعة مشغّل React Native، فاستبدل سلسلة "HelloWorld" بالسلسلة الموجودة في ملف <code>index.js</code> أو ملف <code>index.android.js</code> (هذه السلسلة هي الوسيط الأول للتابع <code>()AppRegistry.registerComponent</code>). | إن استخدمت مجموعة مشغّل React Native، فاستبدل سلسلة "HelloWorld" بالسلسلة الموجودة في ملف <code>index.js</code> أو ملف <code>index.android.js</code> (هذه السلسلة هي الوسيط الأول للتابع <code>()AppRegistry.registerComponent</code>). | ||
− | أضف التابع <code>getLaunchOptions</code> | + | أضف التابع <code>getLaunchOptions</code> الذي يسمح لك بتمرير الخاصيات props إلى المكوّن الخاص بك وهذا أمر اختياري، ويمكنك إزالة التابع <code>setLaunchOptions</code> إن لم تكن بحاجة إلى تمرير أي خاصيات.<syntaxhighlight lang="javascript"> |
private Bundle getLaunchOptions(String message) { | private Bundle getLaunchOptions(String message) { | ||
Bundle initialProperties = new Bundle(); | Bundle initialProperties = new Bundle(); | ||
سطر 108: | سطر 108: | ||
return initialProperties; | return initialProperties; | ||
} | } | ||
− | </syntaxhighlight>أضف جميع ترويسات الاستيراد المفقودة في صنف نشاطك. يجب استخدام | + | </syntaxhighlight>أضف جميع ترويسات الاستيراد المفقودة في صنف نشاطك. يجب استخدام الصنف BuildConfig الخاص بحزمتك وليس ذاك الصنف الموجود في حزمة facebook، أو يمكنك تضمين ترويسات الاستيراد المطلوبة التالية يدويًا:<syntaxhighlight lang="javascript"> |
import android.app.Application; | import android.app.Application; | ||
سطر 119: | سطر 119: | ||
=== الخطوة الخامسة: اختبر الدمج === | === الخطوة الخامسة: اختبر الدمج === | ||
− | تأكد من تشغيل <code>yarn</code> لتثبيت | + | تأكد من تشغيل <code>yarn</code> لتثبيت اعتماديات react-native وتشغيل الأمر <code>yarn native</code> لبدء مجمع metro. شغّل تطبيق Android الخاص بك في برنامج Android Studio الذي يجب أن يحمّل شيفرة JavaScript من خادم التطوير ويعرضها في الجزء React Native Fragment ضمن النشاط. |
=== الخطوة السادسة: الإعداد الإضافي - الوحدات الأصيلة Native modules === | === الخطوة السادسة: الإعداد الإضافي - الوحدات الأصيلة Native modules === | ||
− | قد تحتاج إلى استدعاء شيفرة Java القائمة من مكون React الخاص بك، وتسمح الوحدات الأصيلة باستدعاء الشيفرة الأصيلة وتشغيل التوابع في تطبيقك الأصيل. اتبع إعداد [[ReactNative/native modules android|الوحدات الأصيلة (Android) في React Native]]. | + | قد تحتاج إلى استدعاء شيفرة Java القائمة من مكون React الخاص بك، وتسمح الوحدات الأصيلة باستدعاء الشيفرة الأصيلة وتشغيل التوابع في تطبيقك الأصيل. اتبع خطوات إعداد [[ReactNative/native modules android|الوحدات الأصيلة (Android) في React Native]]. |
== مصادر == | == مصادر == | ||
* [https://reactnative.dev/docs/integration-with-android-fragment صفحة Integration with an Android Fragment في توثيق React Native الرسمي.] | * [https://reactnative.dev/docs/integration-with-android-fragment صفحة Integration with an Android Fragment في توثيق React Native الرسمي.] |
مراجعة 11:51، 5 يونيو 2021
الدمج مع جزء Android
يوضح دليل الدمج مع تطبيقات قائمة في 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.