تحذير: لست متأكدًا من أن هذا هو أفضل نهج لهذه المهمة. إذا كنت تريد تجربتها ، فتأكد من أنك تستخدم عنصر التحكم في المصدر

كيفية إعادة تسمية التطبيق التفاعل الأصلي

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

لحسن الحظ ، أصبحت إعادة تسمية مشروع React Native أسهل بكثير بالنسبة لنا دون تجربة محلية. لست متأكدًا مما إذا كان هذا الأمر ممكنًا كضرورة لإنشاء تطبيق أصلي للتفاعل أو ما إذا كان CRNA يستخدمه ببساطة ولكن يوجد الآن (منذ الإصدار v1.41) ملف app.json وملف تفاعلي طرد القيادة. لقد جعلت هذه الأدوات من إنشاء تطبيق React Native أمرًا سهلاً للغاية ، ولكن بالنسبة لأولئك الذين لديهم بالفعل تطبيقات React Native ، لا يزال بإمكاننا الاستفادة منها في إعادة تسمية التطبيق.

ليرة تركية، والدكتور

  • انسخ أيقوناتك من iOS و Android
  • تحديث اسم العرض في app.json إلى الاسم الجديد
  • حذف دائرة الرقابة الداخلية / والروبوت / الدلائل
  • تشغيل طرد رد فعل الأصلي
  • استبدل الرموز التي نسختها مسبقًا
  • تشغيل رابط رد الفعل الأصلي
  • ابدأ تشغيل تطبيقك وآمل أن يكون ناجحًا! أو اقرأ بقية هذا البرنامج التعليمي.

تفضل الفيديو؟

اقامة

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

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

تجهيز

قد تكون هناك طريقة أفضل للقيام بذلك ، لكن هذا ما وجدته مثالياً بالنسبة لي. مع العلم أن لدي أيقونات تم إعدادها لتطبيقي ، والتي تعيش في ios / و android / directory سأقوم بإنشاء نسخة منها لأن هذه الأدلة سيتم الكتابة عليها بالكامل.

بالنسبة لنظام التشغيل iOS ، سنقوم بنسخ Images.xcassets التي يمكن العثور عليها في ios / YFRNAppSource /. بالنسبة إلى تطبيقي ، كل ما أحتاج إليه - إذا أضفت أصولًا أخرى (مثل شاشات البداية) ، فقد تحتاج إلى الحصول على نسخة منها أيضًا.

بالنسبة إلى Android ، سنقوم بنسخ ملفات mipmap- * التي يمكن العثور عليها على android / app / src / main / res /. بالنسبة إلى تطبيقي ، كل ما أحتاج إليه - إذا أضفت أصولًا أخرى (مثل شاشات البداية) ، فقد تحتاج إلى الحصول على نسخة منها أيضًا.

إذا كنت تعمل على هذا التطبيق لفترة طويلة وقمت بإجراء الكثير من التحديثات على أدلة Android و ios ، فتأكد من مراجعة كل ما أضفته ونسخ الملفات / الدلائل المناسبة.

تغيير الاسم

لتغيير اسم التطبيق ، ستحتاج إلى فتح ملف التطبيق. json في جذر مشروعك. المنجم يشبه هذا

{
  "الاسم": "YFRNAppSource" ،
  "displayName": "YFRNAppSource"
}

لتغيير الاسم المعروض للمستخدم على شاشته الرئيسية ، كل ما ستحتاج إلى تغييره هو خاصية اسم العرض. هذا كل ما سأفعله - بهذه الطريقة ، عندما نتحقق من فرقنا بعد الترقية لن يتغير كل شيء داخل ios / و android / directory ، مما يسهل النظر إليه.

لإجراء التغيير ، سأقوم بتحديث displayName.

{
  "الاسم": "YFRNAppSource" ،
  "displayName": "مدير جهات الاتصال"
}

سأحذف الآن ios / و android / الدلائل من مشروعي.

من خلال أولئك الذين اختفوا ، يمكنني تشغيل الإخراج الأصلي للرد الذي سيعيد إنشاء الملفات - سترى مخرجات مماثلة لهذا في وحدة التحكم الخاصة بك.

➜ YFRNAppSource git: (رئيسي) طرد رد فعل الأم
مسح مجلدات 644 بحثًا عن الارتباطات في / Users / spencer / dev / YFRNAppSource / node_modules (4ms)
توليد مجلد iOS.
إنشاء مجلد Android.

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

إذا قمت بتشغيل حالة git في هذه المرحلة ، فهناك تغييرات أقل بكثير. في حالتي ، السبب الأكبر التالي للتغييرات هو نتيجة عدم ارتباط رموز المتجهات الأصلية.

لحسن الحظ ، يمكننا استخدام رابط رد الفعل الأصلي لحل هذه المشكلة ، لذا سأستخدم هذا الأمر لربط التبعيات الأصلية. إذا كان لديك تبعيات أصلية ، فيجب عليك إعدادها يدويًا (بمعنى أنها لا تعمل مع رابط رد الفعل الأصلي) ، فأنت تريد القيام بذلك الآن أيضًا.

هذا يتركني مع مجموعة أصغر بكثير من التغييرات عند تشغيل حالة بوابة.

تم التعديل: android / app / src / main / res / values ​​/ strings.xml
تعديل: app.json
تعديل: دائرة الرقابة الداخلية / YFRNAppSource.xcodeproj / project.pbxproj
تعديل: دائرة الرقابة الداخلية / YFRNAppSource / Info.plist

التغييرات في strings.xml و app.json هي مجرد تغييرات في الاسم ، فتفحص مجموعة الفرق يجعل الأمر واضحًا.

قد يبدو الاختلاف في ملف project.pbxproj مخيفًا ولكن لم يتغير شيء بالفعل باستثناء السلسلة التي تسبق كل سطر. لا يوجد شيء نحتاج إلى فعله هنا.

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

اختباره خارج

أولاً ، تأكد من قتل الرابط React Native. ثم يمكنك المضي قدمًا وتشغيل التطبيق ، لكنك تفعل ذلك عادةً (بالنسبة لي ، سيكون ذلك من خلال نظام التشغيل iOS للرد التفاعلي وتشغيل نظام التشغيل التفاعلي android).

يمكنك الآن رؤية أن التطبيق له اسم جديد وأن الأيقونة تظل كما هي.

فى الختام

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

أتمنى أن تستمتع بهذا الأمر وإذا كنت مهتمًا بمعرفة المزيد من النصائح والحيل حول React Native اشترك في قائمة بريدي الإلكتروني!