الغوص البارد في التفاعل الأصلي (دروس للمبتدئين)

عندما تم الإعلان عن React Native ، كانت ردود الفعل الأولى إيجابية للغاية. تقليديًا ، عندما نفكر في تقنيات الويب في مساحة الهاتف المحمول ، تتبادر إلى الذهن أشياء مثل Apache Cordova ، والتي تتيح لنا حزم مواقع الويب أو تطبيقات الويب كتطبيقات لمنصات الهاتف المحمول. في هذا البرنامج التعليمي للمبتدئين ، سنلقي نظرة على بنية React Native ، والفلسفة الكامنة وراء React Native ، وكيف تختلف عن الحلول الأخرى في نفس المكان. بنهاية المقالة ، سنكون قد حولنا تطبيق React "Hello World" إلى تطبيق React Native.

لنبدأ بالقول إن React Native هي تقنية جديدة نسبيًا. كان متاحًا رسميًا منذ مارس 2015 ، بعد أن كان في إصدار تجريبي خاص منذ بداية ذلك العام ، واستخدم داخليًا في Facebook لفترة قبل ذلك. ينطبق قول "روما لم تُبنى في يوم واحد" عمومًا على التكنولوجيا أيضًا. استغرقت أدوات مثل grunt ومنصات مثل Node.js سنوات لتنضج. في عالم الويب ، تتحرك الأشياء بسرعة ، ومع ظهور عدد كبير من الأطر والحزم والأدوات كل يوم ، يميل المطورون إلى أن يكونوا أكثر تشككًا ولا يريدون القفز في كل عربة ضجيج فقط لإدراك ذلك انتهى بهم الأمر في حالة حبس البائع. سوف ندخل في ما يجعل React Native مميزًا ، ولماذا هي تقنية تستحق الدخول فيها ، ونغطي بعض الحالات التي لا تكون فيها كلها حيدات وأقواس قزح.

تحت الغطاء

عند الحديث عن تقنيات الويب على الهاتف المحمول ، عادةً ما تندرج الحلول المتاحة في إحدى الفئات التالية.

تجميع تطبيقات الويب في مستعرض ويب للجوال

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

تجميع للتقنيات الأصلية

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

باستخدام طبقة جافا سكريبت

هنا ، نستخدم محرك JavaScript لبيئة الهاتف المحمول وننفذ JavaScript الخاص بنا هناك. يتم تعيين عناصر التحكم الأصلية إلى كائنات ووظائف JavaScript ، لذلك عندما كنا نستدعي وظيفة تسمى fancyButtonRightHere() ، سيظهر زر على الشاشة. NativeScript أو Appcelerator Titanium أمثلة معروفة لهذه الفئة.

يمكن تصنيف React Native على أنه شيء من الفئة الثالثة. بالنسبة لإصدارات iOS و Android ، يستخدم React Native JavaScriptCore تحت الغطاء ، وهو محرك JavaScript الافتراضي على iOS. JavaScriptCore هو أيضًا محرك JavaScript في متصفحات Safari من Apple. يمكن لمطوري OS X و iOS التفاعل معها مباشرة إذا أرادوا ذلك.

يتمثل أحد الاختلافات الكبيرة في أن React Native يقوم بتشغيل كود JavaScript في سلسلة منفصلة ، لذلك لا تحجب واجهة المستخدم ويجب أن تكون الرسوم المتحركة حريرية وسلسة.

رد الفعل هو الميزة الأساسية

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

نقطة دخول واحدة

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

 var MyComponent = function() { this.render = function() { // Render something here }; };

الشيء المميز هو أننا لا نعبث بعناصر DOM هنا ، لكننا نعيد بناء قائم على XML يمثل ما سيتم عرضه في DOM. يسمى هذا البناء المستند إلى XML JSX.

 var MyComponent = function() { this.render = function() { return <div className="my-component">Hello there</div>; }; };

يأخذ محول JSX الخاص كل هذا الرمز الذي يشبه XML ويحوله إلى وظائف. هذا ما سيبدو عليه المكون بعد التحويل:

 var MyComponent = function() { this.render = function() { return React.createElement("div", { className: "my-component" }, "Hello there"); }; };

أكبر ميزة هي أنه من خلال إلقاء نظرة سريعة على المكون ، فإننا نعرف دائمًا ما يفترض القيام به. على سبيل المثال ، قد يعرض مكون <FriendList /> عددًا من مكونات <Friend /> . لا يمكننا تقديم مكوناتنا في أي مكان آخر غير داخل وظيفة render ، لذلك لا داعي أبدًا للقلق من أننا لا نعرف بالضبط من أين جاء المكون الذي تم تصييرنا.

تدفق البيانات أحادي الاتجاه

لبناء محتوى المكوِّن ، توفر React خصائص أو دعائم باختصار. على غرار سمات XML ، نمرّر الخاصيّات مباشرةً إلى مكوّن ويمكننا بعد ذلك استخدام الخاصيّات داخل المكوّن المُنشأ.

 var Hello = function(props) { this.render = function() { return <div className="my-component">Hello {props.name}</div>; }; }; var Greeter = function() { this.render = function() { return <Hello name="there" /> } };

يؤدي هذا إلى أن تكون مكوناتنا في بنية تشبه الشجرة ، ولا يُسمح لنا بتمرير البيانات إلا عند إنشاء عناصر فرعية.

إعادة تقديم على التغييرات

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

يؤدي كل تغيير من الخاصية والحالة إلى إعادة تصيير كاملة للمكوِّن.

DOM الظاهري

الآن عندما يُعاد تصيير كل شيء عندما تتغير الخاصيات أو الحالة ، كيف يمكن أن تؤدي React نفسها أداءً جيدًا؟ المكون السحري هو "DOM الظاهري". كلما دعت الحاجة إلى إعادة تصيير شيء ما ، يتم إنشاء تمثيل افتراضي لـ DOM المحدث. يتكون DOM الظاهري من تمثيلات ضوئية للعناصر التي تم تشكيلها على غرار شجرة المكونات ، مما يجعل عملية تكوينها أكثر كفاءة من إنشاء عناصر DOM حقيقية. قبل تطبيق التغييرات على DOM الحقيقي ، يتم إجراء الفحوصات لتحديد مكان حدوث التغييرات بالضبط في شجرة المكونات ، ويتم إنشاء فرق ، ويتم تطبيق تلك التغييرات المحددة فقط.

الشروع في هذا البرنامج التعليمي React Native

هناك بعض المتطلبات الأساسية التي سيحتاج المبتدئين إلى إعدادها من أجل تطوير React Native. نظرًا لأن iOS كان أول نظام أساسي مدعوم ، وهو النظام الذي نغطيه في هذا البرنامج التعليمي ، فنحن بحاجة إلى macOS و Xcode ، على الأقل الإصدار 6.3. هناك حاجة أيضًا إلى Node.js. ما يساعد في تثبيت Watchman من خلال مدير حزمة Brew مع brew install watchman . في حين أن هذا ليس ضروريًا بالضرورة ، إلا أنه يساعد عند التعامل مع الكثير من الملفات داخل مشروع React Native الخاص بنا.

لتثبيت React Native ، نحتاج ببساطة إلى تثبيت تطبيق سطر أوامر React Native باستخدام npm install -g react-native-cli . بعد ذلك ، يساعدنا استدعاء أمر react-native على إنشاء تطبيق React Native جديد. يؤدي تشغيل react-native init HelloWorld إلى إنشاء مجلد يسمى HelloWorld حيث يمكن العثور على الكود المعياري.

تحويل تطبيق React

نظرًا لأن React هي الميزة الرئيسية والمبادئ الأساسية القادمة من مكتبة React ، فلنلقِ نظرة على ما نحتاجه لتحويل تطبيق React "Hello World" البسيط إلى تطبيق React Native.

نستخدم بعض ميزات ES2015 في مثال الكود هذا ، على وجه التحديد الفئات. من الممكن تمامًا التمسك بـ React.createClass أو استخدام نموذج دالة مشابه لنمط الوحدة النمطية الشائع.

 var React = require('react'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

الخطوة 1: احتضان وحدات CommonJS

في الخطوة الأولى ، نحتاج إلى تغيير مطالبة وحدة React باستخدام react-native ذلك.

 var React = require('react-native'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

ما يكون عادةً جزءًا من خط أنابيب الأدوات عند تطوير تطبيق ويب React هو جزء لا يتجزأ من React Native.

الخطوة 2: لا يوجد DOM

ليس من المستغرب عدم وجود DOM على الهاتف المحمول. حيث استخدمنا سابقًا <div /> ، نحتاج إلى استخدام <View /> وحيث استخدمنا <span /> ، المكون الذي نحتاجه هنا هو <Text /> .

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

في حين أنه من الملائم تمامًا وضع النص مباشرةً في عناصر <div /> ، إلا أنه في العالم الأصلي لا يمكن وضع النص مباشرةً في <View /> . لذلك نحتاج إلى إدخال مكون <Text /> .

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

الخطوة 3: الأنماط المضمنة هي السبيل للذهاب

يتيح لنا React Native استخدام نمذجة Flexbox بدلاً من العبث بالكتلة float inline-block التي نعرفها كثيرًا في عالم الويب. الشيء المثير للاهتمام هو أن React Native لا تستخدم CSS.

 import React from 'react'; import {View, Text, StyleSheet, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View style={styles.box} onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

يبدو استخدام الأنماط المضمنة محيرًا للمبتدئين. إنه مشابه لعملية الانتقال التي كان يتعين على مطوري React المرور بها عند مواجهة JSX وفي السابق باستخدام محركات قوالب مثل Handlebars أو Jade.

الفكرة هي أنه ليس لدينا أوراق أنماط على مستوى العالم بالطريقة التي نستخدم بها CSS. نعلن عن أوراق الأنماط مباشرة على مستوى المكون ، وبالتالي لدينا كل المعلومات التي نحتاجها لمعرفة ما يفعله المكون الخاص بنا والتخطيط الذي ينشئه والأنماط التي يتم تطبيقها.

 import React from 'react'; import {Text} from 'react-native'; var Headline = function(props) { this.render = () => <Text style={headlineStyle.text}>{props.caption}</Text>; }; var headlineStyles = StyleSheet.create({ text: { fontSize: 32, fontWeight: 'bold' } }); module.exports = Headline;

الخطوة 4: التعامل مع الأحداث

ما يعادل النقر في صفحات الويب هو النقر على عنصر على الجهاز المحمول. دعنا نغير الكود الخاص بنا بحيث يظهر "التنبيه" عندما نضغط على العنصر.

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

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

الخطوة 5: تخصيص السلوك عبر الأنظمة الأساسية

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

 ... clickMe() { var message = ''; if(Platform.OS == 'ios') { message = 'Welcome to iOS!'; } else if(Platform.OS == 'android') { message = 'Welcome to Android!'; } Alert.alert(message); } ...

بدلاً من ذلك ، تتوفر طريقة select أيضًا ، والتي توفر بنية تشبه التبديل:

 … clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' }) ); } ...

الخطوة 6: الخطوط المخصصة react-native link

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

لذلك ، إذا كان الاسم الكامل لخطك هو myCustomFont ، فتأكد من أن اسم ملف الخط هو myCustomFont.ttf .

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

يمكننا إخبار npm بمكان أصولنا عن طريق إضافة خاصية Assets ضمن قسم تكامل npm في React ، rnpm:

 "rnpm": { "Assets": [ "./assets/fonts/" ] }

بعد أن قمنا بكل ذلك ، يمكننا أخيرًا تشغيل react-native link . سيؤدي ذلك إلى نسخ الخطوط إلى الدلائل الصحيحة وسيضيف xml الضروري إلى info.plist على iOS.

بمجرد الانتهاء من ذلك ، يمكننا استخدام الخط الخاص بنا بمجرد الرجوع إليه في أي ورقة أنماط بالاسم الكامل. دعنا نستخدمه في عنصر Text لدينا:

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

الخطوة 7: تحريك الأشياء

يستخدم React Native نفس القواعد مثل Flexbox لتخطيط المكونات. لنفترض أننا أردنا وضع الزر الخاص بنا في الجزء السفلي من الشاشة: دعنا نلف TouchableOpacity مع View الحاوية:

 <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View>

والآن دعنا نحدد نمط container ، جنبًا إلى جنب مع الأنماط الأخرى المحددة بالفعل:

 container: { flex: 1, justifyContent: 'center', alignItems: 'center' }

دعونا نركز على justifyContent و alignItems . تتحكم هاتان الخاصيتان في كيفية محاذاة المكون على التوالي على طول محوره الأساسي ومحوره الثانوي. بشكل افتراضي ، يكون المحور الأساسي هو المحور الرأسي ، والمحور الثانوي هو المحور الأفقي (يمكنك تغيير ذلك عن طريق تعيين خاصية flexDirection على row ).

يحتوي justifyContent على ست قيم محتملة يمكن ضبطها على:

• ستعمل flex-start على وضع جميع العناصر معًا في بداية المربع المحيط بالمكون.
• سيضع flex-end جميع العناصر في النهاية.
• سيضع center جميع العناصر في وسط المربع المحيط.
• ستعمل space-around على توزيع المكونات بالتساوي ، وستقوم بتوسيط المكونات في الصناديق المحيطة التي تم إنشاؤها.
• ستعمل space-evenly على توزيع المكونات بالتساوي أيضًا ، لكنها ستحاول ترك مساحة متساوية بين المكونات والحدود الأخرى.
• ستنتشر المسافة space-between المكونات عن طريق الحفاظ على المساواة بين المكونات المتجاورة.

يمكن تعيين alignItems إلى أربع قيم محتملة: flex-start flex-end center stretch . الثلاثة الأولى تتصرف كما تفعل justifyContent ، بينما stretch سيضبط المكون ليشغل كل المساحة المتاحة على طول المحور ، بحيث يتم ملء المحور بالكامل.

لذلك ، نظرًا لأننا نريد أن يتم عرض TouchableOpacity الخاص بنا في الأسفل وأن يتم توسيطه على طول المحور الأفقي ، يمكننا تغيير النمط على النحو التالي:

 container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' }

يمكن العثور على مزيد من المعلومات حول قيم justifyContent و alignItems هنا وهنا.

الخطوة الثامنة: تسجيل التطبيق

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

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' })); } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View> ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' }, box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); var MainComponent = function() { this.render = function() { return <HelloThere name="Component" />; } }; AppRegistry.registerComponent('MainComponent', function() { return MainComponent; });

يتعين علينا تسجيل المكون الخاص بالجانب Objective-C للأشياء ، والذي يتم باستخدام كائن AppRegistry . يجب أن يتطابق الاسم الذي نقدمه مع الاسم الموجود داخل مشروع Xcode.

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

كملاحظة جانبية ، يجب ألا نعيد ربط طريقة clickMe this السياق في طريقة render ، خاصةً إذا كان تطبيق React (الأصلي) الخاص بنا ينمو ليصبح أكثر تعقيدًا بعض الشيء. إنه يعيد ربط الطريقة في كل استدعاء تصيير والذي يمكن أن يصبح كثيرًا جدًا. البديل هو ربط الطريقة داخل المنشئ.

تشغيل التطبيق

لتشغيل التطبيق ، نحتاج إلى استبدال محتويات ملف index.ios.js من كود تطبيقنا المحول من الخطوة الأخيرة. ثم نحتاج فقط إلى فتح مشروع Xcode والضغط على زر التشغيل الكبير. أولاً ، ستفتح محطة طرفية مع خادم React Native ، ثم ستظهر نافذة المحاكاة. يُنشئ خادم React Native حزمة ، سيقوم التطبيق الأصلي بجلبها بعد ذلك. يسمح هذا بدورة تطوير سريعة تشبه تطوير الويب ، حيث تنعكس التغييرات على الفور تقريبًا في جهاز المحاكاة.

بالنسبة لنظام التشغيل Android ، يكفي إضافة ما يلي إلى ملف package.json الخاص بك ، ضمن scripts :

 "android-linux": "react-native bundle --platform android --dev false --entry-file index.ios.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/ main/res && react-native run-android"

ثم قم بتشغيل npm run android-linux . تأكد من وجود دليل android/app/src/main/assets مسبقًا.

بعد ظهور الجهاز ، سيظهر تطبيقنا في جهاز المحاكاة. سيؤدي الضغط على CMD + D إلى إظهار قائمة التطوير. سيؤدي النقر فوق المربع بعد ذلك إلى إظهار تنبيه. إصدار iOS:

ويعرض Android شيئًا كالتالي:

بالنسبة للتوزيع ، فإن امتلاك تطبيق يشير إلى خادم تطوير محلي لن ينجح بالنسبة لنا. لهذا السبب ، يمكننا إنشاء الحزمة للاستخدام عندما لا يعمل خادم React Native باستخدام react-native bundle . في هذه الحالة ، نحتاج إلى تحديث طريقة didFinishLaunchingWithOptions من AppDelegate لاستخدام الحزمة غير المتصلة.

هذا التطبيق النموذجي متاح أيضًا على Github.

العمل مع React Native

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

الطريقة التي يعمل بها React Native هي أنه يضع جميع ملفات JavaScript في حزمة. يتم تقديم هذه الحزمة إما من خادم أو مجمعة مع التطبيق. الأول مفيد بشكل لا يصدق للتطوير في Simulator ، حيث يمكننا تمكين إعادة التحميل المباشر. قائمة المطورين التي يوفرها React ليست بأي حال من الأحوال قوية مثل Chrome Developer Tools ، ولكنها توفر تجربة مطور تشبه الويب تمامًا مع إعادة التحميل المباشر وتصحيح الأخطاء باستخدام أدوات مطور / مصحح أخطاء Chrome (أو Safari).

مطورو الويب معتادون على JSFiddle أو JSBin ، ملعب عبر الإنترنت لاختبارات الويب السريعة. هناك بيئة مماثلة تسمح لنا بتجربة React Native في متصفح الويب.

رد الفعل الأصلي: خيار قوي وحديث

كنت قد اقترحت في الأصل نهجًا أكثر حذرًا تجاه React Native. اليوم ، إنه اختيار ناضج وقوي.

تتمثل إحدى المزايا الكبيرة لـ React في أنها لا تفرض على سير عملك ، لأنها تمثل طبقة العرض فقط. هل تريد تحديد خط أنابيب Grunt الخاص بك؟ أم تفضل استخدام Webpack؟ وهل ستستخدم Backbone.js لاحتياجات نموذجك؟ أو هل تريد استخدام كائنات JavaScript عادية؟ الإجابات على كل هذه الأسئلة متروكة لك تمامًا ، لأن React لا تضع أي قيود على هذه الاختيارات. كما قال الموقع الرسمي: "نظرًا لأن React لا تضع أي افتراضات حول بقية مجموعة التكنولوجيا الخاصة بك ، فمن السهل تجربتها على ميزة صغيرة في مشروع موجود."

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

على أي حال ، هناك شيء واحد مؤكد: لن تختفي React Native. يمتلك Facebook حصة كبيرة في امتلاكه العديد من التطبيقات المدعومة من React Native في متاجر التطبيقات. المجتمع المحيط بـ React Native ضخم ويستمر في النمو.