التخطيط بـ Flexbox في الأجهزة الذكية

import { View, Text, StyleSheet } from 'react-native'; function Box({ n }) {  return <Text style={styles.box}>{n}</Text>;} export default function App() {  return (    <View style={{ padding: 12 }}>      <Text style={styles.h}>row (صفّ):</Text>      <View style={{ flexDirection: 'row', gap: 8 }}>        <Box n="1" /><Box n="2" /><Box n="3" />      </View>      <Text style={styles.h}>column (عمود — الافتراضي):</Text>      <View style={{ gap: 8 }}>        <Box n="1" /><Box n="2" /><Box n="3" />      </View>    </View>  );} const styles = StyleSheet.create({  h: { fontWeight: 'bold', marginTop: 10, marginBottom: 4 },  box: { backgroundColor: '#E8820C', color: 'white', padding: 12, borderRadius: 8, textAlign: 'center', minWidth: 40 },});

import { View, Text, StyleSheet } from 'react-native'; export default function App() {  return (    <View style={styles.bar}>      <Text style={styles.title}>الرئيسية</Text>      <Text style={styles.icon}>☰</Text>    </View>  );} const styles = StyleSheet.create({  bar: {    flexDirection: 'row',    justifyContent: 'space-between',    alignItems: 'center',    backgroundColor: '#E8820C',    padding: 14,  },  title: { color: 'white', fontSize: 18, fontWeight: 'bold' },  icon: { color: 'white', fontSize: 22 },});

import { View, Text, StyleSheet } from 'react-native'; export default function App() {  return (    <View style={{ flexDirection: 'row', height: 100, padding: 8, gap: 6 }}>      <View style={[styles.col, { flex: 2, backgroundColor: '#E8820C' }]}>        <Text style={styles.t}>flex: 2</Text>      </View>      <View style={[styles.col, { flex: 1, backgroundColor: '#2E7D32' }]}>        <Text style={styles.t}>flex: 1</Text>      </View>    </View>  );} const styles = StyleSheet.create({  col: { justifyContent: 'center', alignItems: 'center', borderRadius: 8 },  t: { color: 'white', fontWeight: 'bold' },});