إتقان محاذاة النص الرأسي في React Native

محاذاة النص عمودياً في React Native قد تكون صعبة، حيث لا يوجد ما يعادل مباشرةً خاصية `vertical-align` في الويب. ومع ذلك، فإن الاستفادة من Flexbox يوفر حلولاً أنيقة. تتناول هذه المقالة طريقتين فعالتين: استخدام justifyContent و alignItems لمركز النص داخل حاوية.

محتويات الجدول

• مركز النص باستخدام justifyContent و alignItems
• مركز متقدم: التعامل مع المكونات المتداخلة

مركز النص باستخدام justifyContent و alignItems

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

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const CenteredText = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>هذا النص مُركز عمودياً وأفقياً!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 200, 
    backgroundColor: 'lightblue', 
  },
  text: {
    fontSize: 20,
  },
});

export default CenteredText;

شرح:

• flex: 1: يسمح لـ View بالتوسع لملء المساحة المتاحة للعنصر الأصل.
• justifyContent: 'center': يركز المحتوى عمودياً داخل View.
• alignItems: 'center': يركز المحتوى أفقياً. هذا يضمن بقاء النص مُركزاً حتى لو تغير عرضه.
• height: 200: تحديد ارتفاع ثابت أمر بالغ الأهمية. بدون ذلك، لن يكون لـ justifyContent تأثير، حيث سيتخذ النص الوضع الافتراضي في الأعلى.

مركز متقدم: التعامل مع المكونات المتداخلة

للتخطيطات الأكثر تعقيداً مع المكونات المتداخلة، هناك حاجة إلى نهج مختلف قليلاً. تستخدم هذه الطريقة مزيجاً من flexDirection و alignItems و flex لتحقيق محاذاة رأسية دقيقة.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const CenteredTextNested = () => {
  return (
    <View style={styles.container}>
      <View style={styles.innerContainer}>
        <Text style={styles.text}>هذا النص مُركز عمودياً وأفقياً أيضاً!</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 200,
    backgroundColor: 'lightcoral',
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
  },
});

export default CenteredTextNested;

شرح:

• الـ View الخارجي (container) لا يحتاج إلى flexDirection: 'row'. الـ View الداخلي يتعامل مع المحاذاة.
• flex: 1 على View الداخلي (innerContainer) يسمح له بالتوسع لملء ارتفاع العنصر الأصل.
• justifyContent: 'center' و alignItems: 'center' على innerContainer يركز النص عمودياً وأفقياً داخل تلك الحاوية.

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