التنسيق والـ Styles — أساسيات React Native

التنسيق في React Native

StyleSheet

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>عنوان</Text>
      <Text style={[styles.text, styles.bold]}>نص غامق</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  text: {
    fontSize: 16,
    color: '#666',
  },
  bold: {
    fontWeight: 'bold',
  },
});

Flexbox في React Native

اتجاه العناصر (flexDirection)

// افتراضياً: column (عمودي)
{ flexDirection: 'column' }  // عمودي
{ flexDirection: 'row' }     // أفقي

توزيع العناصر (justifyContent)

{ justifyContent: 'flex-start' }    // البداية
{ justifyContent: 'center' }        // الوسط
{ justifyContent: 'flex-end' }      // النهاية
{ justifyContent: 'space-between' } // توزيع متساوي
{ justifyContent: 'space-around' }  // توزيع مع مسافات

محاذاة العناصر (alignItems)

{ alignItems: 'flex-start' } // البداية
{ alignItems: 'center' }     // الوسط
{ alignItems: 'flex-end' }   // النهاية
{ alignItems: 'stretch' }    // تمدد

مثال تطبيقي: بطاقة مستخدم

const UserCard = () => (
  <View style={cardStyles.container}>
    <Image 
      source={{ uri: 'https://via.placeholder.com/80' }}
      style={cardStyles.avatar}
    />
    <View style={cardStyles.info}>
      <Text style={cardStyles.name}>أحمد محمد</Text>
      <Text style={cardStyles.email}>ahmed@email.com</Text>
    </View>
  </View>
);

const cardStyles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 15,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 3, // للأندرويد
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 15,
  },
  info: {
    flex: 1,
  },
  name: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
  email: {
    fontSize: 14,
    color: '#888',
    marginTop: 4,
  },
});

الألوان والظلال

const cardStyle = {
  // ألوان
  backgroundColor: '#3b82f6',
  color: 'rgba(0, 0, 0, 0.8)',
  
  // حدود
  borderWidth: 1,
  borderColor: '#ddd',
  borderRadius: 10,
  
  // ظلال iOS
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  
  // ظلال Android
  elevation: 5,
};