ReactNative インストール手順 Windows向け

この記事では、Windowsユーザ向けにReactNativeを使用したスマホアプリを開発するためのインストール手順を紹介します。

スマホアプリを簡単に作るためにExpoを使用します。スマホの実機も使用しますのでご準備ください。

Node.js インストール

下記にアクセスして、LTS版のインストーラをダウンロードしてください。 https://nodejs.org/ja/

ダウンロードされたインストーラを起動して、基本的にポチポチするだけで簡単にインストールできます。

※異なるバージョンのNode.js環境を整備したい場合には、nvmを使うのがおすすめです。その場合は下記の記事を参照ください。

インストール後の確認は、コマンドプロンプトを開いて、下記のコマンドを実行してバージョンが表示されればOKです。

node -v

Expo CLI インストール

コマンドプロンプトを開いて、Expo CLIをインストールするために下記のコマンドを実行してください。

npm install expo-cli -g

アプリのプロジェクト作成

アプリのプロジェクトを作成するために任意のフォルダに移動して、下記のコマンドを実行してください。

expo init hello-world

矢印キーでスマホアプリのテンプレートを選択してください。ここでは、blankを選択しています。

Choose a template: (Use arrow keys)
  ----- Managed workflow -----
> blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

ホーム画面の名前を入力してください。任意の名前でOKです。

? Choose a template: expo-template-blank
? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ » 50% completed
 {
   "expo": {
     "name": "",
     "slug": "hello-world"
   }
 }

作成している間にスマホにExpo アプリをインストールしましょう。

Expo アプリ インストール

Android/iOS端末でExpoアプリをインストールしてください。Google Play/App Storeで検索してください。
Google Playでは「Expo」、App Storeでは「Expo Client」という名前になっています。
※アカウント登録は特にしなくても大丈夫です。

このときスマホはPCと同じネットワーク内に存在しないといけないため、そのネットワークのWiFiにつないでおいてください。

アプリ起動

プロジェクトの作成が完了したら、下記のコマンドを実行してください。
プロジェクトフォルダに移動して、アプリを起動します。

cd hello-world
expo start

コマンドプロンプト上にQRコードが表示されますので、スマホでQRコードを読み取り、Expoアプリで開いてください。

Expoアプリに作成したプロジェクトのアプリがダウンロードされて画面が表示されます。

ソースの修正方法

プロジェクトフォルダ直下に App.js が存在しています。
App.jsがブラウザ上で最初に表示される画面を定義しているので、あとは自由にその中身を変更してください。

以上です。
閲覧ありがとうございました。