كيفية إنشاء تخطيطات سريعة الاستجابة في React Native

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

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

1. أولا وقبل كل شيء ، فليكس بوكس

يمكن للمكونات التحكم في التخطيط باستخدام خوارزمية flexbox. تم إنشاؤه للحفاظ على النسب واتساق التخطيط على أحجام الشاشات المختلفة.

يعمل Flexbox بشكل مشابه جدًا لـ CSS على الويب مع استثناءات قليلة يسهل تعلمها حقًا. عندما تكون الخاصية المرن رقمًا موجبًا ، تصبح المكونات مرنة وستتكيف مع الشاشة وفقًا لقيمتها المرنة. هذا يعني أن المرن يساوي flexGrow: [number] ، flexShrink: 1 ، flexBasis: 0.

عند الثني: 0 - يتناسب حجمها مع الارتفاع والعرض وغير مرن.
إذا كان المرن رقمًا سالبًا ، فإنه يستخدم أيضًا الارتفاع والعرض ، ولكن إذا لم تكن هناك مساحة كافية ، فسوف يتقلص إلى minHeight و minWidth.

هناك عدد قليل من الخصائص الرئيسية التي يوفرها flexbox ، لذا دعنا نتعرف عليها!
يصف فليكس كيف تقسم العناصر المسافة بينها. كما ذكر أعلاه ، يقتصر الأمر على أرقام فردية.

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

الاتجاه المرن - يمكننا اختيار صف أو عمود (يمكنك أيضًا ضبط الاتجاه المعاكس) لتعيين المحور الرئيسي الذي سيتم وضع المحتوى الخاص بك على طوله. بشكل افتراضي ، يتم تعيين flexDirection على عمود بدلاً من صف - والذي يحدث بسبب طبيعة الشاشة على الأجهزة المحمولة.

justifyContent - تساعدك هذه الخاصية على وضع المحتوى داخل حاوية على طول المحور الرئيسي. يمكنك التحقق من بعض المواضع الممكنة أدناه:

محاذاة العناصر - تعمل بنفس طريقة ضبط المحتوى ولكن مع محاذاة العناصر على المحور العمودي مع المحور الرئيسي.

تقوم الدعامة المرنة بعمل جيد حقًا في الحفاظ على النسب بين العناصر. بغض النظر عن حجم الشاشة. تحافظ FlexDirection و justifyContent على اتساق سلوك التخطيط.

هناك العديد من الدعائم فليكس بوكس. لقد لمست القليل فقط لأوضح كيف يمكن أن تكون مفيدة.

2. نسبة العرض إلى الارتفاع

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

3. أبعاد الشاشة

إنه لأمر رائع أن تكون تصميماتك متماثلة لكل من النظامين الأساسيين وجميع أنواع الأجهزة (الأجهزة المحمولة والأجهزة اللوحية وأجهزة iPad). ومع ذلك ، في بعض الأحيان يتعين علينا التعامل مع تخطيطات مختلفة لأبعاد شاشة معينة أو أنواع أجهزة.

بشكل افتراضي ، لا توفر React Native خصائص تجيب بوضوح على الجهاز أو حجم الشاشة. لكن هناك علاج لهذا.

لمعرفة أبعاد الشاشة ، يمكننا استخدام Dimensions API.

 import { Dimensions } from 'react-native'; const {width, height} = Dimensions.get('window');

منذ React Native 0.61 يمكنك أيضًا استخدام خطاف.

 const {width, height} = useWindowDimensions();

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

 import { Text, View, Dimensions } from 'react-native'; class App extends PureComponent { constructor(props) { super(props); this.state = { width: Dimensions.get('window').width }; } render() { return ( <View> {this.state.width < 320 ? <Text>width of the past</Text> : <Text>how big is big enough?</Text>} </View> ); } }

4. كشف المنصة

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

هناك العديد من الحالات التي يمكن استخدامها:
في وظيفة تصيير المكون:

 <View> {Platform.OS === 'ios' ? <Text>Hi Apple!</Text> : <Text>Hi Android!</Text>} </View>

في الأنماط:

 cube: { width: Platform.OS === 'ios' ? 200 : 300, aspectRatio: 1 }

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

 const Logo = Platform.select({ ios: () => require('Apple'), android: () => require('Android'), })(); <Logo />;

في الأنماط:

 import {Platform, StyleSheet} from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, ...Platform.select({ ios: { backgroundColor: 'red', }, android: { backgroundColor: 'blue', }, }), }, });

5. دوران الجهاز

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

 class RotateComponent extends PureComponent { constructor(props) { super(props); this.state = { orientation: '' }; } getOrientation = () => { if (Dimensions.get('window').width < Dimensions.get('window').height) { this.setState({ orientation: 'portrait' }); } else { this.setState({ orientation: 'landscape' }); } }; componentDidMount() { Dimensions.addEventListener('change', this.getOrientation); } render() { return ( <Text>{this.state.orientation}</Text> ); } }

إذا كنت بحاجة إلى دعم تغيير الاتجاه عبر التطبيق ، فمن الجيد استخدام HOC لحقن الاتجاه.

const HOC = WrappedComponent => يمتد الفصل إلى PureComponent {المُنشئ (الدعائم) {super (props) ؛ this.state = {الاتجاه: ”}؛ } componentDidMount () {Dimensions.addEventListener ('change'، this.getOrientation)؛ } getOrientation = () => {if (Dimensions.get ('window'). width؛}}؛

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

هل تشعر بالفضول بشأن React Native؟

يتعلم أكثر

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

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