0Pricing
React Native Academy · 课时

作为容器的 View 组件

使用 View 作为主要布局容器，通过嵌套多个 View 构建结构化屏幕，并了解它如何映射到原生界面框。

作为容器的 View 组件 是 CoddyKit 上的免费 React Native Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 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 组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Native Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Native Academy 课程共包含 4 节课。

「作为容器的 View 组件」这节课中我会学到什么？

使用 View 作为主要布局容器，通过嵌套多个 View 构建结构化屏幕，并了解它如何映射到原生界面框。 你通过在浏览器中直接运行的动手代码来练习 React Native Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Native Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Native Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「作为容器的 View 组件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Native Academy 课中编写并运行代码吗？

能。每节 React Native Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 作为容器的 View 组件
  2. 显示文本与设置字体样式
  3. 显示本地与远程来源的图像
  4. 组合一个简单的个人资料卡片
← 返回 React Native Academy