نقدم لك ترجمة لمقالة نيخيل ساشديفا المنشورة على موقع hackernoon.com. تشارك المؤلف تجربتها في تطوير تطبيقات الهاتف المحمول باستخدام React Native ويقترح إنشاء تطبيق لها باستخدام هذا الإطار.
كنت مطور Android واستخدم Java لبعض الوقت. في الآونة الأخيرة فقط جربت يدي في إنشاء تطبيقات الهاتف المحمول باستخدام React Native. لقد جعلني ألقي نظرة جديدة على عملية التطوير ، على أقل تقدير. الغرض من مقالي هو إظهار الفروق التي لاحظتها باستخدام هذين الإطارين في تطوير التطبيق.
ما هو رد فعل الأم؟
معلومات من الموقع الرسمي:
"يتيح لك React Native إنشاء تطبيقات محمولة باستخدام JavaScript فقط بنفس بنية React. وهذا يجعل من الممكن إنشاء واجهة مستخدم متنقلة متعددة الوظائف باستخدام مكونات تعريفية. "
هذه هي نفس التطبيقات مثل تطبيقات iOS أو Android الأصلية المكتوبة في Swift أو Java / Kotlin.
"التطبيقات التي تنشئها باستخدام React Native ليست تطبيقات ويب للجوال لأن React Native تستخدم نفس المكونات مثل تطبيقات iOS و Android العادية. بدلاً من استخدام Swift أو Kotlin أو Java ، يمكنك إنشاء هذه المكونات باستخدام JavaScript و React. "
لذلك ، اتضح أن React Native هو إطار عمل قائم على
React.js ، والذي يسمح لك بتطوير تطبيقات عبر منصات لكل من Android و iOS.
قد تسأل ، لماذا الابتعاد عن جافا المألوفة وتعلم جافا سكريبت و React.js؟ فيما يلي بعض مزايا استخدام هذه اللغات.
الايجابيات: ما سوف يفوز
1. التنمية عبر منصة
الهدف الرئيسي للمطورين هو تقديم الخدمات للعملاء. لا يرغب أي شخص في أن يقتصر مستخدموه على نظام أساسي واحد فقط لأن المطور لا يمكنه إنشاء تطبيقات لأنظمة أساسية أخرى. لذلك ، يجب ألا يحد المطور نفسه من قدراته لمجرد أنه / هي مرتاح للعمل مع أداة تطوير محددة.
إطار React Native محمول ، أي أن قاعدة الشفرة المفردة ، المكتوبة بلغة JavaScript ، ستنشئ وحدات لكل من Android و iOS.
2. اتقان رد الفعل
بعد إتقان React Native و JavaScript ، ستكتشف عالماً جديداً من التطوير الأمامي فيما يتعلق ، على سبيل المثال ، بمواقع الويب. يعتمد إطار React Native على نفس مكونات React ، وبالتالي فإن المهارات المكتسبة هنا لا تقتصر على تطوير تطبيقات الهاتف المحمول.
3. وقت البناء أسرع من Android Studio
هل سبق لك أن أمضيت أكثر من 2-3 دقائق في البناء لاختبار / إصلاح الوظيفة الأساسية ، وفي الوقت نفسه تم تمديد الخطأ في الإصلاح لعدة ساعات؟ الحل سيكون رد فعل الأصلية. مع ذلك ، التجمع يستغرق وقتا أقل بكثير. مع ميزة مثل Hot Reloading ، يعد تصميم واختبار واجهة المستخدم أمرًا سهلاً. بفضل هذه الميزة ، يتم إعادة تشغيل التطبيق في كل مرة يتم حفظ ملف JS!
4. JavaScript مناسب لنقل البيانات عبر الشبكة.
في React Native ، يكون استدعاء واجهات برمجة التطبيقات ، وتقديم الصور حسب عنوان URL ، والعمليات الأخرى في غاية البساطة. لم تعد بحاجة إلى استخدام
Retrofit ، أو OkHttp ، أو Picasso ، وما إلى ذلك. يُنفق وقت أقل في الإعداد. عندما تأتي البيانات من واجهة برمجة تطبيقات على نظام Android ، يتم تحويلها أولاً إلى نموذج POJO ثم يتم استخدامها فقط في عناصر واجهة المستخدم. لكن بيانات JSON التي تم الحصول عليها في React Native ملائمة لجافا سكريبت ويمكن استخدامها مباشرة لمعاينة واجهة المستخدم. يعمل ذلك على تسهيل الحصول على واجهة الويب لطلبات GET أو POST من واجهة برمجة تطبيقات REST.
5. تطوير واجهة المستخدم
في
React Native ،
تعمل وحدة
flexbox ، وهي منافس جاد في ترميز Android XML ،
كواجهة مستخدم UI. Flexbox شائع جدًا في مجتمع مطوري الويب. في React Native ، يجب تطوير عناصر واجهة المستخدم بشكل أساسي من البداية ، بينما في تطوير Android الأصلي ، مكتبة دعم تصميم Google متصلة بالفعل. هذا يعطي المطور حرية من حيث التصميم التفاعلي والاستجابة.
سلبيات: ما الذي من المحتمل أن تخسره؟
1. ربما تكره جافا سكريبت
كثير من الناس لا يحبون JavaScript ببساطة لأن هذه اللغة لا تبدو مثل اللغات التقليدية مثل
Java و C ++ وغيرها. يمكنك العثور على ملاحظات سلبية مفصلة
هنا وهنا .
2. ليس هناك العديد من مكتبات الطرف الثالث
لا يزال مجتمع React Native في مراحله الأولى ويدعم مكتبات الجهات الخارجية ، وليست شائعة مثل مكتبة Android الأصلية (بالمناسبة ، قم
بتقييم عرض الشرائح في مكتبة Android الخاصة بي).
مثال التطبيق
للبدء ، دعونا نحاول تطوير تطبيق لاستخراج البيانات من API لفهم كيفية عمل React Native البسيط. من الواضح أن الخطوة الأولى هي تثبيت React Native. للقيام بذلك ، انتقل إلى
الموقع الرسمي . سوف تجد أيضًا تعليمات رائعة للمبتدئين هناك - اقرأها. سنستخدم
https://jsonplaceholder.typicode.com/photos API الوهمية ، والذي يحتوي على البيانات التالية:
يرجى ملاحظة أنه بالنسبة إلى Android ، يعد العمل مع واجهات برمجة التطبيقات باستخدام مكتبات مثل Retrofit / OkHttp مهمة صعبة. ومع ذلك ، نرى أن لغة JavaScript الديناميكية والتكرارية تبسط هذا العمل.
دعنا ننتقل إلى إنشاء مشروع MockApp:
رد الفعل الأصلي mockapp
مؤتمر نزع السلاح mockappبعد ذلك ، قم بتشغيله على جهازك الظاهري / المحلي باستخدام:
رد فعل الأم تشغيل الروبوتستظهر الصورة التالية على الشاشة:
شاشة بدء التطبيقسيبدو تطبيق API الذي سننشئه كما يلي:
وبالتالي فإن النتيجة تبدو وكأنها تطبيقالآن افتح المشروع في محرر نصوص واضبط App.js ، كما هو موضح أدناه:
export default class App extends Component<Props> { constructor(props){ super(props); this.state ={ isLoading: true} } componentDidMount(){ return fetch('https://jsonplaceholder.typicode.com/photos') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson, }, function(){ }); }) .catch((error) =>{ console.error(error); }); } render() { if(this.state.isLoading){ return( <View style={{flex: 1, padding: 20}}> <ActivityIndicator/> </View> )} return( <View style={{flex: 1, paddingTop:20}}> <Text style={styles.header}>Mock App</Text> <FlatList data={this.state.dataSource} renderItem={({item}) => <View style={styles.card}><Text style={styles.id}> {item.id}</Text><Text style={styles.title}>{item.title}</Text><Image source ={{uri : item.url }} style={styles.image}/></View>} keyExtractor={({id}, index) => id} /> </View> ); }
هناك الكثير من المعلومات في هذا الرمز. سأقدم نظرة عامة مختصرة على جميع الكلمات الرئيسية الرئيسية في الشفرة ، لكنني أواصل البحث عن كل كلمة رئيسية لا تفهمها. سوف يستغرق بعض الوقت.
1. componentDidMount. هذا جزء من React Native في دورة حياة التطبيق.
يتم تشغيل componentDidMount () مباشرة بعد إضافة المكون إلى شجرة المكون.
2. جلب. للتعامل مع طلبات الشبكة ، يحتوي React Native
على Fetch API .
3. متغيرات الحالة (isLownload ، مصدر البيانات). isLownload هو متغير منطقي يوضح ما إذا كان يتم تحميل بيانات واجهة برمجة التطبيقات أم لا. dataSource هو متغير يخزن استجابة JSON من أمر الجلب.
4. قائمة مسطحة. هذا هو ما يعادل RecyclerView في React Native ، فقط أبسط بكثير. يعرض المكون FlatList ورقة التمرير من البيانات التي يمكن أن تتغير ، على الرغم من أن لديها بنية مشتركة.
تعتبر FlatList رائعة للعمل مع القوائم الطويلة التي يمكن أن يتغير فيها عدد العناصر بمرور الوقت.
كما نرى ، في قائمة البيانات ، لا نحتاج إلى فصل المتغيرات لكل عنصر. هذا هو جمال لغة ديناميكية ، أي لغة JavaScript. يتم تحديد نوع المتغير في الوقت الفعلي ، لذلك لا يزال العمل باستخدام كميات كبيرة من البيانات مهمة بسيطة.كما نرى ، تم تحديد أنماط كل مكون بالفعل. نحن بحاجة إلى تعيين قيم المتغيرات. يمكن القيام بذلك بالطريقة التالية:
const styles = StyleSheet.create({ card: { padding: 20, margin: 10, borderColor: '#ff7a00', borderWidth: 2, borderRadius: 10, backgroundColor: '#f3ea68', flex: 1, }, header: { fontSize: 40, padding: 10, }, image: { height: 60, width: 60, }, title: { fontSize: 20, color: '#000', }, id: { fontSize: 30, } });
هذا هو المكان الذي ينتهي عملنا. تمكنا من إنشاء تطبيق يمكن معاينة مكوناته من خلال استخدام واجهة برمجة التطبيقات.
وأخيرا ، ها هي النتيجة:
