React Nativeとは？

React Nativeは、Reactの知識を使ってモバイルアプリを作れるフレームワークです。

WebとReact Nativeの違い

Webの場合

// HTMLタグを使う
function App() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>説明文</p>
      <button>クリック</button>
    </div>
  );
}

React Nativeの場合

// React Native専用コンポーネントを使う
import { View, Text, Button } from 'react-native';

function App() {
  return (
    <View>
      <Text>タイトル</Text>
      <Text>説明文</Text>
      <Button title="クリック" onPress={() => {}} />
    </View>
  );
}

重要な違い：

• HTML タグ（div、p、h1など）は使えない
• React Native専用のコンポーネントを使う
• スタイリングの方法が異なる

コアコンポーネント

React Nativeには、よく使う基本的なコンポーネントが用意されています。

1. View - レイアウトの基本

ViewはHTMLのdivのようなものです。他のコンポーネントを囲むコンテナとして使います。

import { View } from 'react-native';

function App() {
  return (
    <View>
      {/* ここに他のコンポーネントを入れる */}
    </View>
  );
}

特徴：

• レイアウトを組むための基本コンポーネント
• 複数のコンポーネントをグループ化できる
• スタイルを適用できる

2. Text - テキスト表示

TextはHTMLのpやspanのようなものです。テキストを表示する時は必ずTextコンポーネントを使います。

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

function App() {
  return (
    <View>
      <Text>こんにちは、React Native！</Text>
    </View>
  );
}

❌ 間違った例

// これはエラー！テキストは必ずTextで囲む
function App() {
  return (
    <View>
      こんにちは  {/* ダメ！ */}
    </View>
  );
}

✅ 正しい例

function App() {
  return (
    <View>
      <Text>こんにちは</Text>  {/* OK！ */}
    </View>
  );
}

Textの中にTextをネストできます：

function App() {
  return (
    <View>
      <Text>
        これは<Text style={{ fontWeight: 'bold' }}>太字</Text>です
      </Text>
    </View>
  );
}

スタイリング

React Nativeでは、StyleSheetを使ってスタイルを定義します。

StyleSheetの基本

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

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>タイトル</Text>
      <Text style={styles.text}>本文</Text>
    </View>
  );
}

// StyleSheetでスタイルを定義
const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f0f0f0',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  text: {
    fontSize: 16,
    color: '#666',
  },
});

重要なポイント：

• CSSではなくJavaScriptオブジェクトとして書く
• プロパティ名はcamelCase（background-color → backgroundColor）
• 単位は基本的につけない（fontSize: 24 であって 24px ではない）
• 文字列値はクォートで囲む（color: '#333'）

Flexboxレイアウト

React Nativeのレイアウトは、Flexboxというシステムを使います。

デフォルトは縦並び

React Nativeでは、デフォルトで子要素が縦に並びます。

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

function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,  // 画面全体を使う
  },
  box1: { height: 100, backgroundColor: '#ffcdd2' },
  box2: { height: 100, backgroundColor: '#c8e6c9' },
  box3: { height: 100, backgroundColor: '#bbdefb' },
});

横並びにする - flexDirection

flexDirection: 'row' を使うと、子要素を横に並べられます。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',  // 横並びにする
  },
  box1: { width: 100, height: 100, backgroundColor: '#ffcdd2' },
  box2: { width: 100, height: 100, backgroundColor: '#c8e6c9' },
  box3: { width: 100, height: 100, backgroundColor: '#bbdefb' },
});

配置を調整する

justifyContent - メイン軸の配置

flexDirection の方向（縦なら縦、横なら横）の配置を決めます。

justifyContentの値：

• 'flex-start' - 開始位置（デフォルト）
• 'center' - 中央
• 'flex-end' - 終了位置
• 'space-between' - 要素間に均等な余白
• 'space-around' - 要素の周りに均等な余白

alignItems - クロス軸の配置

flexDirection と垂直な方向の配置を決めます。

alignItemsの値：

• 'flex-start' - 開始位置
• 'center' - 中央
• 'flex-end' - 終了位置
• 'stretch' - 引き伸ばす（デフォルト）

実践例：中央配置

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

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>画面の中央</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',  // 縦方向の中央
    alignItems: 'center',      // 横方向の中央
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

まとめ

コアコンポーネント

• View: HTMLのdivのようなコンテナ
• Text: テキスト表示（必須）

スタイリング

• StyleSheet: スタイル定義に使う
• camelCase: プロパティ名はキャメルケース
• 単位不要: 数値は単位なしで書く

Flexboxレイアウト

• デフォルト: 縦並び（column）
• flexDirection: 'row'で横並び
• justifyContent: メイン軸の配置
• alignItems: クロス軸の配置
• flex: スペースの割合

React Nativeでは、WebのHTMLタグの代わりに専用コンポーネントを使い、CSSの代わりにStyleSheetを使います。Flexboxを使いこなせば、柔軟なレイアウトが組めます！

次は、ユーザー入力を扱う方法を学びましょう。