React Native Academy · درس

مكوّن View بوصفه حاوية

استخدم View بوصفه حاوية التخطيط الأساسية، وضمّن عدة Views لإنشاء شاشات منظمة، وافهم كيفية تمثيله لمربعات واجهة المستخدم الأصلية.

مكوّن View بوصفه حاوية درس مجاني في React Native Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Native Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Native Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

What Is the View Component?

Meet View — the basic box you build every screen with. It is a rectangle that holds other components, mapping to a real native box on iOS and Android.

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

export default function App() {
  return (
    <View>
      <Text>I am inside a View!</Text>
    </View>
  );
}

View Maps to Native UI Boxes

Every View you write becomes a real native box on the device — not HTML in a browser. That is why your app feels as smooth as one built in Swift or Kotlin.

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

// A simple colored box rendered natively
export default function Box() {
  return (
    <View style={styles.box} />
  );
}

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#4f86f7',
    borderRadius: 12,
  },
});

Nesting Views for Structure

The real power is nesting: put Views inside Views to build rows, columns, and sections. Every View is a Flexbox container, so children just line up.

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

export default function Layout() {
  return (
    <View style={styles.screen}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Header</Text>
      </View>
      <View style={styles.body}>
        <Text>Body content here</Text>
      </View>
      <View style={styles.footer}>
        <Text>Footer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1 },
  header: { height: 60, backgroundColor: '#333', justifyContent: 'center', alignItems: 'center' },
  body: { flex: 1, padding: 16 },
  footer: { height: 50, backgroundColor: '#eee', justifyContent: 'center', alignItems: 'center' },
  headerText: { color: '#fff', fontWeight: 'bold' },
});

View Styling: backgroundColor and Borders

Style a View with the style prop. Reach for backgroundColor, borderRadius, padding, and margin — written in camelCase, with plain numbers, not "16px".

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

export default function Card() {
  return (
    <View style={styles.card}>
      {/* Children go here */}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    padding: 20,
    marginHorizontal: 16,
    marginVertical: 8,
    // Shadow (iOS)
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    // Shadow (Android)
    elevation: 3,
  },
});

flex: 1 to Fill Available Space

Add flex: 1 and a View stretches to fill its parent. Your outer screen View usually wants this so it spreads across the whole display.

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

export default function SplitScreen() {
  return (
    <View style={{ flex: 1 }}>
      {/* Top half */}
      <View style={{ flex: 1, backgroundColor: '#4f86f7' }} />
      {/* Bottom half */}
      <View style={{ flex: 1, backgroundColor: '#f74f4f' }} />
    </View>
  );
}

Absolute Positioning in View

Need an overlay or floating badge? Set position: absolute, then place it with top, bottom, left, and right. It pops out of the normal Flexbox flow.

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

export default function BadgeExample() {
  return (
    <View style={styles.container}>
      <View style={styles.icon} />
      {/* Badge overlaid in top-right corner */}
      <View style={styles.badge}>
        <Text style={styles.badgeText}>3</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { width: 48, height: 48 },
  icon: { width: 48, height: 48, backgroundColor: '#555', borderRadius: 8 },
  badge: {
    position: 'absolute',
    top: -4, right: -4,
    width: 20, height: 20,
    borderRadius: 10,
    backgroundColor: 'red',
    alignItems: 'center', justifyContent: 'center',
  },
  badgeText: { color: '#fff', fontSize: 11, fontWeight: 'bold' },
});

overflow: 'hidden' for Clipping

By default a View lets children spill past its edges. Add overflow: hidden to clip them — perfect for round avatars or neat rounded cards.

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

export default function CircleAvatar() {
  return (
    <View style={styles.circle}>
      <Image
        source={{ uri: 'https://picsum.photos/80' }}
        style={{ width: 80, height: 80 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  circle: {
    width: 80,
    height: 80,
    borderRadius: 40,
    overflow: 'hidden', // clips the image to the circle
  },
});

The pointerEvents Prop

The pointerEvents prop decides if a View catches touches. Set it to "none" so taps pass right through — handy for overlays that should not block scrolling.

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

function LoadingOverlay({ visible }) {
  if (!visible) return null;
  return (
    // 'box-none' — overlay blocks no touches (children can)
    // Use 'auto' to block all interaction behind it
    <View style={styles.overlay} pointerEvents='auto'>
      <Text style={styles.text}>Loading...</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: { color: '#fff', fontSize: 18 },
});

StyleSheet.absoluteFillObject

StyleSheet.absoluteFillObject is a shortcut that makes a View fill its parent edge to edge. Spread it in for instant full-screen overlays and loaders.

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

// Full-screen background overlay
const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    zIndex: 999,
  },
});

// Equivalent to:
// { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
//   backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 999 }

SafeAreaView for Notch and Home Bar

Phones have notches and home bars. Wrap your screen in SafeAreaView and your content stays clear of them, never hidden behind the hardware.

import { SafeAreaView, StyleSheet, Text } from 'react-native';
// Or use from react-native-safe-area-context for more control
// import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text>This content avoids the notch!</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

Platform-Specific View Styling

Sometimes iOS and Android need different styles. The Platform module helps: Platform.OS tells you which one, and Platform.select() picks the right value.

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

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    // Platform-specific shadows:
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.15,
        shadowRadius: 6,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});

Quick Check

Quick check! See how well the View basics stuck. 💪

Lesson Recap

Nice work! View is your native container, flex: 1 makes it fill its parent, and SafeAreaView keeps content off notches. Next up: showing text.

الأسئلة الشائعة

هل درس «مكوّن View بوصفه حاوية» مجاني؟

نعم — نص درس «مكوّن View بوصفه حاوية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Native Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Native Academy 4 دروس في المجموع.

ماذا ستتعلم في «مكوّن View بوصفه حاوية»؟

استخدم View بوصفه حاوية التخطيط الأساسية، وضمّن عدة Views لإنشاء شاشات منظمة، وافهم كيفية تمثيله لمربعات واجهة المستخدم الأصلية. تتمرن على React Native Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Native Academy؟

لا تُشترط خبرة سابقة. React Native Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «مكوّن View بوصفه حاوية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Native Academy هذا؟

نعم. كل درس في React Native Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى React Native Academy