React Nativeを基本からまとめてみた【入門・開発環境構築】

React Nativeとは？

• 『React』を使い、『iPhone』『Android』アプリを作る技術を『React Native』という
• kotlinやswiftを知らなくてもモバイルアプリを作成できる
• 競合のアプリはFlutterでDartという言語を使われていることにより、Web系でなく専用言語なので学習が必要

React Nativeを開発時に選ぶ道

1.React Native

• Reactのコードだが『iOs』『Android』のフォルダがあって
  ビルドの方法がGradleかXcode15の技術を使うため、両方の知識が必要

2.Expo

• GradleかXcode15をビルドする必要がほとんどない
• 注意点は、Expoに対応しているExpoが提供しているライブラリしか使えない

2.Expo

• 『Expo Go』を使えば簡単にデバックと開発ができる
• Expoを利用するときは、『eas』というコマンドを入れる
• 『eas update』でアプリを遠隔でアップデートできる

Expo	2つの中間	ReactNative
難易度(低)	難易度(中)	難易度(高)
Expo Go (IOS・Android対応)	Developmennt Build	Gradle(IOS) Xcode15(Android)
Expo GoをIPhoneに入れる	ExpoサーバでBuildをする	各ツールを使って自分でビルドを作る
そのままデバッグ	デバッグ	デバッグ

Expo/React Nativeの開発環境を構築する

1.Expoをインストール

$ bun create expo ./ --template blank-typescript

2.必要なパッケージをインストールする

$ npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

3.セットアップエントリポイントを設定する

package.json

- "main": "index.ts"
+ "main": "expo-router/entry"

4. プロジェクト構成を変更する

app.json

+ "scheme": "2025-newest-expo-setup-scheme"

5.babel.config.jsを作成する

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

6.バンドラキャッシュをクリアする

$ bun start --clear

タブレイアウトを作成する

📁 app/
   ├── 📄 _layout.tsx
   └── 📁 (tabs)/
       ├── 📄 _layout.tsx
       ├── 📄 index.tsx
       └── 📄 settings.tsx

1.app/_layout.tsxを作成する

appディレクトリ直下に_layout.tsxを作成する

app/_layout.tsx

import { Stack } from 'expo-router/stack';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

app/(tabs)/_layout.tsxを作成する

appディレクトリの中に(tabs)ディレクトリを作成し、その中に_layout.tsxを作成する

app/(tabs)/_layout.tsx

import FontAwesome from '@expo/vector-icons/FontAwesome';
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: 'blue' }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="home" color={color} />,
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: 'Settings',
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="cog" color={color} />,
        }}
      />
    </Tabs>
  );
}

3. app/(tabs)/index.tsxを作成する

appディレクトリの中に(tabs)ディレクトリを作成し、その中にindex.tsxを作成する

app/(tabs)/index.tsx

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

export default function Tab() {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

4. app/(tabs)/settings.tsxを作成する

appディレクトリの中に(tabs)ディレクトリを作成し、その中にsettings.tsxを作成する

app/(tabs)/settings.tsx

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

export default function Tab() {
  return (
    <View style={styles.container}>
      <Text>Settings</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

5. 動作を確認する

$ bun start

参考サイト

Reactでモバイルアプリ開発！React NativeとExpoの使い分けを解説！ #勉強0歩目に見る授業
2025年版 Expo/React Native開発環境構築を最速で学ぼう！