React Native 入門 — 環境構築から Navigation まで

React Native は、JavaScript と React の知識を活かして iOS / Android アプリを作れるフレームワークです。本記事では、初めて触る方向けに、環境構築から画面遷移までを一通り追える構成にまとめます。

この記事で扱うこと

章	内容
環境構築	Node.js、Expo CLI、実機確認
コンポーネント	View、Text、Pressable の基本
StyleSheet	レイアウトとスタイルの書き方
Navigation	画面遷移の最小構成
まとめ	次に学ぶとよいテーマ

1. 環境構築

まずは Node.js（LTS 推奨）をインストールし、Expo ベースのプロジェクトを作成します。Expo は初期セットアップが短く、実機確認も QR コードで始めやすいため、入門ではこちらを使うことが多いです。

# プロジェクト作成
npx create-expo-app@latest MyFirstApp

# 開発サーバー起動
cd MyFirstApp
npx expo start

expo start 後に表示される QR コードを、スマホの Expo Go アプリで読み取ると実機プレビューできます。エミュレータを使う場合は、ターミナル上の i（iOS）または a（Android）でも起動できます。

つまずきやすい点

• Node のバージョンが古いと依存解決で失敗しやすい
• 実機と PC が同じ Wi-Fi にいないと接続できないことがある
• 初回ビルドはキャッシュ生成で時間がかかる

2. コンポーネントの基本

React Native では HTML タグの代わりに、View や Text などのコンポーネントを使います。Web の div / span に近いイメージですが、すべてがコンポーネントである点が大きな違いです。

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

export function HelloCard() {
  return (
    <View>
      <Text>Hello, React Native</Text>
      <Pressable onPress={() => console.log("pressed")}>
        <Text>タップ</Text>
      </Pressable>
    </View>
  );
}

Text の外側に生テキストを置くと表示されないため、文字列は必ず Text で包む癖をつけるとよいです。

3. StyleSheet でレイアウトする

CSS ファイルではなく、StyleSheet.create でスタイルオブジェクトを定義します。Flexbox が基本なので、Web の Flex レイアウト経験があると理解しやすいです。

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

export function ProfileCard() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>プロフィール</Text>
      <Text style={styles.body}>React Native 学習中</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: "#f8fafc",
    gap: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: "600",
    color: "#0f172a",
  },
  body: {
    fontSize: 14,
    color: "#334155",
  },
});

gap のように、最近の React Native では Web に近いプロパティも使えるようになっています。ただしプラットフォーム差分は残るため、実機確認は欠かせません。

4. Navigation を追加する

画面が増えると、React Navigation を使って画面遷移を管理するのが一般的です。最小構成では Stack Navigator を 1 つ置き、Home と Detail の 2 画面を作る形から始めると理解しやすいです。

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Text, View } from "react-native";

const Stack = createNativeStackNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
}

function DetailScreen() {
  return (
    <View>
      <Text>Detail</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Navigation を入れるときは、公式ドキュメントのバージョンと Expo SDK の対応表を確認してから依存関係を追加すると、ビルドエラーを減らせます。

5. まとめ

React Native 入門では、次の順番で進めるとつまずきにくいです。

1. Expo で起動確認まで到達する
2. 1 画面の UI を View / Text / StyleSheet で組み立てる
3. ボタン操作（Pressable）を追加する
4. Navigation で画面を分ける

ここまでできれば、状態管理（useState）、API 通信、フォーム入力など、アプリ開発の本題に入れます。次の記事では、Expo Router を使ったファイルベースルーティングや、実機ビルドの流れを扱う予定です。