5.5 KiB
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 ( 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 في محاولة لنفسك.