React Nativeのスタイルの書き方！CSSとの違いやおすすめの方法

React Nativeでは、WebのCSSとは異なるスタイルの書き方が必要です。

「どうやってデザインすればいいの？」「CSSは使えるの？」と疑問に思う方も多いでしょう。

本記事では、React Nativeのスタイルの基本から、CSSとの違い、効率的なスタイリング方法まで詳しく解説します！

1. React Nativeのスタイルの基本
2. React NativeとCSSの違い
3. スタイルの適用方法（インライン・StyleSheet・カスタムフック）
4. おすすめのスタイル管理方法
1. ① StyleSheet（公式推奨）
2. ② カスタムフック（動的なスタイル管理）
5. まとめ：React Nativeのスタイルをマスターしよう！

1. React Nativeのスタイルの基本

React Nativeでは、スタイルをJavaScriptオブジェクトとして定義します。

基本の書き方

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f8f9fa",
  },
  text: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#333",
  },
});

📌 ポイント

StyleSheet.create() でスタイルを定義
CSSではなく、オブジェクト形式でスタイルを記述

✅ これがReact Nativeの基本的なスタイルの書き方！

2. React NativeとCSSの違い

React Nativeのスタイルは、WebのCSSとはいくつか異なる点があります。

📌 違い① クラス名がない

CSSのように className="container" は使えず、style に直接適用する。

<View style={styles.container}></View>

📌 違い② スタイルの単位

React Nativeには px の概念がなく、数値＝dp（デバイスの解像度に依存しない単位） になる。

text: {
  fontSize: 16, // → "16px" ではなく、単に 16
}

✅ 数値はそのまま書けばOK！単位は不要！

📌 違い③ Flexboxがデフォルト

React Nativeのレイアウトは flexboxが基本。

container: {
  flex: 1, 
  justifyContent: "center", 
  alignItems: "center",
}

✅ CSSで display: flex; を書く必要なし！

📌 違い④ 一部のCSSプロパティが使えない

border-radius → borderRadius
background-color → backgroundColor
text-align → textAlign

✅ CSSのハイフンをキャメルケースに変換するのがルール！

3. スタイルの適用方法（インライン・StyleSheet・カスタムフック）

① インラインスタイル

<Text style={{ color: "blue", fontSize: 18 }}>インラインスタイル</Text>

📌 メリット：簡単に適用できる
📌 デメリット：コードが長くなる

② StyleSheet（推奨）

const styles = StyleSheet.create({
  text: {
    color: "blue",
    fontSize: 18,
  },
});

📌 メリット：コードが整理され、パフォーマンスも向上！
📌 デメリット：一部の動的なスタイル変更が難しい

③ 動的なスタイルの適用

状態に応じて、スタイルを切り替えたい場合は三項演算子を使う

import React, { useState } from "react";
import { View, Text, Button, StyleSheet } from "react-native";

export default function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={isActive ? styles.activeText : styles.text}>スタイル切り替え</Text>
      <Button title="切り替え" onPress={() => setIsActive(!isActive)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    color: "black",
  },
  activeText: {
    color: "red",
    fontWeight: "bold",
  },
});

✅ ボタンを押すと、テキストの色が変わる！

4. おすすめのスタイル管理方法

① StyleSheet（公式推奨）

基本的には StyleSheet.create() を使うのが最適。

② カスタムフック（動的なスタイル管理）

動的なスタイルを管理するには カスタムフック を使うのもアリ！

const useDynamicStyles = (isDarkMode) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: isDarkMode ? "#333" : "#fff",
    },
    text: {
      color: isDarkMode ? "#fff" : "#000",
    },
  });

export default function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);
  const styles = useDynamicStyles(isDarkMode);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>ダークモード</Text>
      <Button title="切り替え" onPress={() => setIsDarkMode(!isDarkMode)} />
    </View>
  );
}