التنسيق وFlexbox والمساحة المتاحة

import {View, Text, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
  row: {flexDirection: 'row', alignItems: 'center', padding: 16},
  mark: {width: 20, height: 20, backgroundColor: 'teal', marginEnd: 8},
  label: {flex: 1, flexShrink: 1},
});
export default function App() {
  return <View style={styles.row}>
    <View style={styles.mark} />
    <Text style={styles.label} numberOfLines={2}>Riverside reading workshop</Text>
  </View>;
}

The label uses the remaining row width and is limited to two lines.

يجب أن توفر البيئة عرض صف محدودا. الالتفاف الدقيق ومقاييس الخط الأصلي توقعات مستنتجة، وليست نتائج عرض مسجلة.

import {View, Text, useWindowDimensions} from 'react-native';
export default function App() {
  const {width} = useWindowDimensions();
  const wide = width >= 600;
  return <View style={{flexDirection: wide ? 'row' : 'column', padding: 16}}>
    <Text style={{flex: 1}}>Workshop overview</Text>
    <Text style={{flex: 1}}>Reading materials</Text>
  </View>;
}

Widths below600 choose a column; widths at least600 choose a row.

عتبة 600 وحدة مثال لهذا التركيب، وليست توصية عامة للتخطيط المتكيف.