メインコンテンツへスキップ

フレームワークなしで始める

プラットフォームサポート
Android
iOS
macOS
TV
watchOS
Web
Windows
visionOS

フレームワークではうまく対応できない制約がある場合や、独自のフレームワークを書きたい場合は、フレームワークを使わずにReact Nativeアプリを作成することができます。

そのためには、まず環境をセットアップする必要があります。セットアップが完了したら、以下の手順に従ってアプリケーションを作成し、開発を開始してください。

ステップ1：新規アプリケーションの作成​

以前にグローバルな react-native-cli パッケージをインストールした場合は、予期せぬ問題を引き起こす可能性があるため削除してください。

shell
npm uninstall -g react-native-cli @react-native-community/cli

React Native Community CLI を使って新しいプロジェクトを生成できます。それでは、「AwesomeProject」という名前の新しいReact Nativeプロジェクトを作成しましょう。

shell
npx @react-native-community/cli@latest init AwesomeProject

既存のアプリケーションにReact Nativeを統合する場合、プロジェクトにExpoをインストールした場合、または既存のReact NativeプロジェクトにAndroidサポートを追加する場合（既存アプリとの統合を参照）は、この手順は不要です。Ignite CLI のようなサードパーティ製のCLIを使ってReact Nativeアプリをセットアップすることもできます。

info

iOSで問題が発生した場合は、以下を実行して依存関係を再インストールしてみてください。

  1. cd iosでiosフォルダに移動します。
  2. bundle installでBundlerをインストールします。
  3. bundle exec pod installでCocoaPodsが管理するiOSの依存関係をインストールします。

【任意】特定のバージョンやテンプレートを使用する​

特定のReact Nativeバージョンで新しいプロジェクトを開始したい場合は、--version引数を使用できます。

shell
npx @react-native-community/cli@X.XX.X init AwesomeProject --version X.XX.X

--template引数を使ってカスタムのReact Nativeテンプレートでプロジェクトを開始することもできます。詳細はこちらを参照してください。

ステップ2：Metroの起動​

MetroはReact NativeのためのJavaScriptビルドツールです。Metro開発サーバーを起動するには、プロジェクトフォルダから以下を実行します。

shell
npm start
note

Web開発に詳しい方なら、MetroはViteやwebpackのようなバンドラに似ていますが、React Nativeのためにエンドツーエンドで設計されています。例えば、MetroはJSXのような構文を実行可能なJavaScriptに変換するためにBabelを使用します。

ステップ3：アプリケーションの起動​

Metro Bundlerは専用のターミナルで実行したままにしておきます。React Nativeプロジェクトフォルダ内で新しいターミナルを開き、以下を実行してください。

shell
npm run android

すべてが正しくセットアップされていれば、まもなくAndroidエミュレータで新しいアプリが実行されるはずです。

これはアプリを実行する方法の1つです。Android Studio内から直接実行することもできます。

これがうまくいかない場合は、トラブルシューティングのページを参照してください。

ステップ4：アプリの変更​

アプリの実行に成功したので、次は変更を加えてみましょう。

  • お好みのテキストエディタでApp.tsxを開き、いくつかの行を編集してください。
  • Rキーを2回押すか、開発メニュー（Ctrl + M）からReloadを選択すると、変更が反映されます！

以上です！​

おめでとうございます！最初のベアボーンなReact Nativeアプリの実行と変更に成功しました。

次は何をしますか？​

  • この新しいReact Nativeコードを既存のアプリケーションに追加したい場合は、統合ガイドを確認してください。
  • React Nativeについてもっと学びたい場合は、React Native入門をご覧ください。