Komponent View jako kontener
Użyj View jako głównego kontenera układu, zagnieżdżaj wiele komponentów View, aby budować uporządkowane ekrany, i poznaj sposób odwzorowania ich na natywne elementy interfejsu.
Komponent View jako kontener to bezpłatna lekcja React Native Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Native Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Native Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Ucz się JavaScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Komponent View jako kontener” jest bezpłatna?
Tak — pełny tekst „Komponent View jako kontener” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Native Academy, przejdź na CoddyKit PRO. Kurs React Native Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Komponent View jako kontener”?
Użyj View jako głównego kontenera układu, zagnieżdżaj wiele komponentów View, aby budować uporządkowane ekrany, i poznaj sposób odwzorowania ich na natywne elementy interfejsu. Ćwiczysz React Native Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Native Academy?
Nie wymagamy żadnego doświadczenia. React Native Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Komponent View jako kontener”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Native Academy?
Tak. Każda lekcja React Native Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Komponent View jako kontener
- Wyświetlanie tekstu i stylowanie czcionek
- Wyświetlanie obrazów ze źródeł lokalnych i zdalnych
- Tworzenie prostej karty profilu