0Pricing
React Academy · レッスン

StyleSheet APIとFlexboxによるスタイリング

CSS class namesを使わず、StyleSheet.createとFlexboxでモバイル向けのスタイルを記述します。

「StyleSheet APIとFlexboxによるスタイリング」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

React NativeにはCSSがありません

React Nativeでは、JavaScriptのスタイリングAPIを使用します。CSSファイル、クラス名、カスケードはありません。スタイルはJavaScriptオブジェクトとして定義し、styleプロパティを通じて適用します。

StyleSheet.create()

パフォーマンスを向上させ、IDEの自動補完を利用するには、スタイルオブジェクトをStyleSheet.create()でラップします（スタイルは一度だけ検証および最適化されます）。

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

function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff', borderRadius: 8, shadowColor: '#000', shadowOpacity: 0.1, elevation: 2 },
  title: { fontSize: 18, fontWeight: 'bold', color: '#111' },
});

インラインスタイル

styleプロパティを使って、スタイルを直接適用します。配列構文を使うと複数のスタイルオブジェクトを結合できます。後のスタイルが前のスタイルを上書きします。

<View style={{ padding: 16, backgroundColor: '#f5f5f5' }} />

// Array merging:
<Text style={[styles.base, isActive && styles.active, { marginTop: 8 }]} />

React NativeのFlexbox

React Nativeでは、レイアウトにFlexboxをデフォルトで使用しますが、Webとはデフォルト値が異なります。flexDirectionのデフォルト値は'column'（'row'ではありません）で、flex: 1は利用可能なスペースを埋めます。

const styles = StyleSheet.create({
  container: {
    flex: 1,                   // fill available space
    flexDirection: 'column',   // default in RN (web default is 'row')
    justifyContent: 'center',  // main axis alignment
    alignItems: 'center',      // cross axis alignment
  },
});

行レイアウト

flexDirection: 'row'を使うと、子要素を水平方向に配置できます。これはCSSのdisplay: flex; flex-direction: rowと同じような動作です。

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12, // gap is supported in RN 0.71+
  },
});

<View style={styles.row}>
  <Image source={avatar} />
  <Text>{username}</Text>
</View>

flexとwidth/heightの使い分け

比例したサイズを指定するにはflex: Nを使います。flex: 1は残りのスペースをすべて埋め、flex: 2はflex: 1の兄弟要素の2倍のスペースを確保します。

// Sidebar takes 1/3, content takes 2/3:
<View style={{ flexDirection: 'row', flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: '#eee' }}>Sidebar</View>
  <View style={{ flex: 2 }}>Content</View>
</View>

絶対位置指定

重ねて表示する要素には、top、right、bottom、leftとともにposition: 'absolute'を使います。相対位置の親要素内でCSSの絶対位置指定を使う場合と同じです。

const badge = StyleSheet.create({
  badge: {
    position: 'absolute',
    top: -4,
    right: -4,
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: 'red',
  },
});

プラットフォーム固有のスタイル

Platform.OSまたはPlatform.select()を使うと、iOSとAndroidで異なるスタイルを適用できます。

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 4 },
      android: { elevation: 4 },
    }),
  },
});

カラー

React Nativeでは、CSSのカラー文字列（hex、rgb、名前付きカラー）と、システムカラー用のPlatformColor APIを使用できます。

import { PlatformColor } from 'react-native';

// System color — adapts to dark mode automatically:
const labelColor = PlatformColor('label', '#000'); // iOS 'label' semantic color

Propsを使った動的なスタイル

コンポーネント内で、Propsからスタイルを計算します。StyleSheetに関数を渡すか、スタイルオブジェクトをインラインで計算します。

function Badge({ color, size = 16 }: { color: string; size?: number }) {
  return (
    <View
      style={[
        styles.badge,
        { backgroundColor: color, width: size, height: size, borderRadius: size / 2 },
      ]}
    />
  );
}

const styles = StyleSheet.create({ badge: { position: 'absolute' } });

理解度チェック

React NativeでのflexDirectionのデフォルト値は何ですか（Webとは異なります）。

まとめ

最適化されたスタイルにはStyleSheet.create()を使い、styleプロパティを通じて適用します。React NativeのFlexboxではflexDirection: 'column'がデフォルトで、flex: 1は残りのスペースを埋めます。OS固有のシャドウスタイルにはPlatform.select()を使います。

よくある質問

「StyleSheet APIとFlexboxによるスタイリング」レッスンは無料ですか？

はい。「StyleSheet APIとFlexboxによるスタイリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「StyleSheet APIとFlexboxによるスタイリング」で何を学びますか？

CSS class namesを使わず、StyleSheet.createとFlexboxでモバイル向けのスタイルを記述します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「StyleSheet APIとFlexboxによるスタイリング」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. React Native Core ComponentsとWeb DOMの比較
  2. StyleSheet APIとFlexboxによるスタイリング
  3. Expo Routerによるナビゲーション
  4. Device APIへのアクセス：Camera、Location、Push Notifications
← React Academyに戻る