React Nativeの基本！コンポーネント・状態管理・ナビゲーションの使い方

React Nativeは、JavaScriptでiOS/Androidアプリを開発できるフレームワークです。

「とりあえず環境構築はできたけど、次に何をすればいいの？」と悩んでいませんか？

本記事では、React Nativeの基本となる「コンポーネント」「状態管理」「ナビゲーション」について、わかりやすく解説します！

1. React Nativeの基本構成
2. React Nativeのコンポーネントの使い方
1. 基本のコンポーネント
2. カスタムコンポーネントの作成
  1. ボタンを別ファイルにする
  2. App.js で使用する
3. React Nativeの状態管理（useStateの使い方）
1. useStateを使った状態管理
4. React Navigationで画面遷移を実装
1. React Navigationのインストール
2. スタックナビゲーションの設定
5. まとめ：React Nativeの基本をマスターしよう！

1. React Nativeの基本構成

React Nativeは、Web開発のReactと似た構造を持っています。

主な要素

コンポーネント：画面を構成する部品（例：ボタン、入力欄など）
状態管理：データの管理（例：useState、useContext、Redux）
ナビゲーション：画面の遷移（例：スタックナビゲーション、タブナビゲーション）

それぞれ、実際のコードを交えながら解説します！

2. React Nativeのコンポーネントの使い方

React Nativeでは、基本的なUIを「コンポーネント」として作成します。

基本のコンポーネント

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
      <Button title="押してね" onPress={() => alert("ボタンが押されました！")} />
    </View>
  );
}

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

📌 ポイント

<View> → HTMLの<div>のような役割
<Text> → HTMLの<p>のような役割
<Button> → ボタンの作成（onPress でイベントを設定）

カスタムコンポーネントの作成

コードの再利用性を高めるため、コンポーネントを分割しましょう。

ボタンを別ファイルにする

MyButton.js（カスタムボタンコンポーネント）

import React from "react";
import { Button } from "react-native";

export default function MyButton({ title, onPress }) {
  return <Button title={title} onPress={onPress} />;
}

App.js で使用する

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import MyButton from "./MyButton"; // カスタムボタンをインポート

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
      <MyButton title="押してね" onPress={() => alert("カスタムボタンが押されました！")} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontSize: 20,
  },
});

✅ カスタムコンポーネントを作ると、コードが整理され、再利用しやすくなる！

3. React Nativeの状態管理（useStateの使い方）

アプリ開発では、ボタンを押したときにデータを変更するなど、動的な処理が必要になります。

useStateを使った状態管理

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontSize: 24 }}>カウント: {count}</Text>
      <Button title="増やす" onPress={() => setCount(count + 1)} />
    </View>
  );
}

📌 ポイント

useState を使うことで、画面の状態を管理できる
setCount(count + 1) で値を更新すると、自動的にUIが更新される

✅ ボタンを押すたびにカウントが増える！

4. React Navigationで画面遷移を実装

アプリには、複数の画面を切り替えるナビゲーション機能が必要です。

React Navigationのインストール

以下のコマンドで、ナビゲーションライブラリをインストールします。

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons react-native-bottom-sheet
npm install @react-navigation/stack

スタックナビゲーションの設定

App.js

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

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontSize: 24 }}>ホーム画面</Text>
      <Button title="詳細へ" onPress={() => navigation.navigate("Detail")} />
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontSize: 24 }}>詳細画面</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>
  );
}