freeCodeCamp/guide/arabic/react-native/styling/index.md

title, localeTitle

title	localeTitle
Styling	تصميم

رد الفعل الأصلية - التصميم

يوفر React Native واجهة برمجة تطبيقات لإنشاء أوراق الأنماط وتصميم مكوناتك : StyleSheet .

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

export default class App extends Component {
  render () {
    return (
      <View>
        <Text style={styles.header}>I am a header!</Text>
        <Text style={styles.text}>I am some blue text.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    fontSize: 20
  },
  text: {
    color: 'blue'
  }
});

في حين أن أنماط صفحات الأنماط المتتالية من CSS غير صالحة ، فإن مجموعة الروابط المتداخلة لـ CSS الخاصة بـ Native تشبه إلى حد كبير CSS التقليدية. تكون العديد من خصائص CSS (مثل color ، height ، top ، right ، bottom ، left ) هي نفسها في StyleSheet. يجب تغيير أي خصائص CSS لها واصلات (مثل font-size ، background-color ) إلى camelCase (مثل fontSize ، backgroundColor ).

ليست كل خصائص CSS موجودة في StyleSheet. نظرًا لعدم وجود مفهوم حقيقي للحوم على أجهزة الجوال ، فإن خصائص CSS hover لا تتواجد في React Native. بدلاً من ذلك ، يوفر React Native مكونات قابلة للمس التي تستجيب لأحداث اللمس.

كما لا يتم توريث الأنماط كما هي في CSS التقليدية. في معظم الحالات ، يجب عليك تعريف نمط كل مكون.

تنسيقات Flexbox

يستخدم React Native تطبيق flexbox مشابهًا لمعيار الويب. بشكل افتراضي ، سيتم تعيين العناصر في العرض display: flex .

إذا كنت لا ترغب في استخدام flexbox ، فيمكنك أيضًا ترتيب React Native components عبر المواقع relative أو absolute .

flexDirection: column Native flexDirection: column to flexDirection: column ، instead of flex-direction: row (web standard). تعرض قيمة column العناصر المرنة رأسياً ، والتي تستوعب الأجهزة المحمولة في الاتجاه العمودي.

لمعرفة المزيد حول flexbox ، قم بزيارة هذا الدليل التفصيلي حول CSS-Tricks ونهج تعلم مهذب مع Flexbox Froggy .

مكونات منسقة

لا يسهل دائمًا الحفاظ على تضمين الكثير من الأنماط في ملف يحتوي على مكون. يمكن للمكونات ذات التصميم حل هذه المشكلة.

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

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

const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;
  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

export default Button;

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#336633',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#336633',
    paddingTop: 4,
    paddingBottom: 4,
    paddingRight: 25,
    paddingLeft: 25,
    marginTop: 10,
    width: 300
  }
};

يمكن بسهولة استيراد واستخدام مكون الزر عبر التطبيق دون الإعلان عن كائن النمط بشكل متكرر:

import React, { Component } from 'react';
import { TextInput, View } from 'react-native';
import Button from './styling/Button';

export default class Login extends Component {
  render() {
    return (
        <View>
          <TextInput placeholder='Username or Email' />
          <TextInput placeholder='Password' />
          <Button>Log In</Button>
        </View>
    );
  }
}

مكتبات لتصميم

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