React Native Academy · レッスン

コンテナとしてのViewコンポーネント

Viewを基本的なレイアウトコンテナとして使い、複数のViewを入れ子にして構造化された画面を構築し、ネイティブUIのボックスにどのように対応するかを理解します

「コンテナとしてのViewコンポーネント」はCoddyKit上の無料React Native Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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コンポーネント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Native Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Native Academyコースには全4レッスンが含まれています。

「コンテナとしてのViewコンポーネント」で何を学びますか？

Viewを基本的なレイアウトコンテナとして使い、複数のViewを入れ子にして構造化された画面を構築し、ネイティブUIのボックスにどのように対応するかを理解しますブラウザで直接実行するハンズオンコードでReact Native Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Native Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Native Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「コンテナとしてのViewコンポーネント」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Native Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Native Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Native Academyに戻る