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

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 ( I am a header! I am some blue text. ); } }

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 ( {children} ); };

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 ( Log In ); } } `

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

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