最初のアプリを作成する

新しい Expo アプリを初期化する

新しい Expo アプリを初期化するために create-expo-app を使います。これは新しい React Native プロジェクトを作成するためのコマンドラインツールです。それでは、ターミナルで次のコマンドを実行してみましょう。

このコマンドは デフォルト テンプレートを使用して、StickerSmash という名前の新しいプロジェクトディレクトリを作成します。このテンプレートには、Expo Router を含む、アプリ構築に必要な基本的なボイラープレートコードとライブラリが含まれています。チュートリアルの中で必要に応じてライブラリを追加していきます。

現在、create-expo-app@latest は Expo SDK テンプレートの選択を求めます。このチュートリアルは SDK 54 向けに設計されているため、必ず SDK 54 のテンプレートを選択してください。

アセットをダウンロードする

アーカイブをダウンロードしたら:

1. アーカイブを展開し、your-project-name/assets/images ディレクトリ内のデフォルトアセットを置き換えます。
2. コードエディタまたは IDE でプロジェクトディレクトリを開きます。

reset-project スクリプトを実行する

このチュートリアルでは、アプリをゼロから構築し、ファイルベースのナビゲーションを追加する基本を理解します。ボイラープレートコードを取り除くために、reset-project スクリプトを実行しましょう。

上記のコマンドを実行すると、app ディレクトリには 2 つのファイル (index.tsx と _layout.tsx) が残ります。app ディレクトリと他のディレクトリ (components、constants、hooks — ボイラープレートコードを含む) からの以前のファイルは、スクリプトによって app-example ディレクトリに移動されます。進めながら独自のディレクトリやコンポーネントファイルを作成していきます。

モバイルと web でアプリを実行する

プロジェクトディレクトリで、ターミナルから 開発サーバー を起動するために次のコマンドを実行します。

上記のコマンドを実行すると:

1. 開発サーバーが起動し、ターミナルウィンドウ内に QR コードが表示されます。
2. その QR コードをスキャンしてデバイスでアプリを開きます。Android では Expo Go > Scan QR code オプションを使い、iOS ではデフォルトのカメラアプリを使います。
3. web アプリを実行するには、ターミナルで W を押します。デフォルトの web ブラウザで web アプリが開きます。

すべてのプラットフォームで動作すると、アプリは次のようになります。

index 画面を編集する

app/index.tsx ファイルは、アプリの画面に表示されるテキストを定義します。これはアプリのエントリーポイントであり、開発サーバーが起動したときに実行されます。背景とテキストを表示するために、React Native の <View> や <Text> などのコアコンポーネントを使用します。

これらのコンポーネントに適用されるスタイルは、web で使われる CSS ではなく JavaScript オブジェクトを使います。ただし、これまでに web で CSS を使ったことがあれば、見覚えのあるプロパティが多いはずです。ほとんどの React Native コンポーネントは、JavaScript オブジェクトを値として受け取る style プロパティを受け付けます。詳細については Styling in React Native を参照してください。

app/index.tsx 画面を変更しましょう。

1. react-native から StyleSheet をインポートし、カスタムスタイルを定義する styles オブジェクトを作成します。
2. <View> に styles.container.backgroundColor プロパティを追加し、値を #25292e にします。これにより背景色が変わります。
3. <Text> のデフォルト値を「Home screen」に置き換えます。
4. <Text> に styles.text.color プロパティを追加し、テキストの色を変えるために値を #fff (白) にします。

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
  },
});

React Native は web と同じ色フォーマットを使用します。16 進数トリプレット (これが #fff の形式)、rgba、hsl、および red、green、blue、peru、papayawhip などの名前付きカラーをサポートします。詳細については Colors in React Native を参照してください。

変更を保存すると、開発サーバーに接続している実行中のアプリに変更が送信され、適用されます。