rn-7-2. StyleSheetの使い方

StyleSheetを使ったスタイリングを学びます

React Native - 第1章: React Native基礎 - コンポーネントとスタイリング

📚

課題：StyleSheetの使い方を学ぼう

React Nativeでは、StyleSheetを使ってスタイルを定義します。色、サイズ、余白などを指定して、見た目を整えましょう。

やること

1.StyleSheetでスタイルを定義する
2.コンテナの背景色を青（#2196F3）にする
3.タイトルのテキスト色を白、サイズを24にする
4.サブタイトルのテキスト色を白、サイズを16にする
5.paddingとmarginを設定する

StyleSheetの使い方

StyleSheetをインポートします：

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

スタイルを定義します：

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#2196F3',
    padding: 20,
  },
  title: {
    fontSize: 24,
    color: 'white',
  },
});

スタイルを適用します：

<View style={styles.container}>
  <Text style={styles.title}>タイトル</Text>
</View>

ポイント：StyleSheet.createで定義すると、パフォーマンスが良くなります。色は文字列で指定します。

期待される出力

┌─────────────────────┐
│  ようこそ！         │  ← 青い背景、白文字、24px
│  React Nativeへ     │  ← 16px
└─────────────────────┘

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>ようこそ！</Text>
      <Text style={styles.subtitle}>React Nativeへ</Text>
    </View>
  );
}

// ここにスタイルを定義してください
const styles = StyleSheet.create({
  container: {
    // 背景色: #2196F3
    // padding: 20
    
  },
  title: {
    // 文字サイズ: 24
    // 文字色: white
    // marginBottom: 10
    
  },
  subtitle: {
    // 文字サイズ: 16
    // 文字色: white
    
  },
});

Open Sandbox

← 前のレッスン: rn-7-1. ViewとTextの基本

次のレッスン: rn-7-3. Flexboxレイアウト（縦方向） →