React-Native( Expo )を使って作るアプリ開発の導入方法

backham
技術

アプリのインストール

まず初めに、Expoを使うのでスマホにExpoの公式アプリをインストールする。
インストールしてアプリを起動すると、アカウントを作るように言われるのでアカウントを作成する。

アプリのひな型を作成

作成したら次に、コンソールでnpmを使ってcreate-react-native-appをインストールする。

$ > npm i -g create-react-native-app

次に任意のフォルダーに入って、react-nativeのひな型を作成

$ > cd 任意のフォルダー
$ > create-react-native-app 任意のプロジェクト名

typescriptを使う場合は、以下を実行

$ > cd 任意のフォルダー
$ > create-react-native-app 任意のプロジェクト名 --scripts-version=react-native-scripts-ts

アプリを実行

上記で、ひな型を作成したら作成されたフォルダーに入って npm start をする。
するとコンソール上にQRコードが出てくるので、それをスマホのカメラを使ってスキャンする。

$ > cd 任意のプロジェクト名
$ > npm start
/*
* ここのQRコードをスマホのカメラを使ってスキャンする
*/

QRコードをスキャンするとさっきインストールしたExpoのアプリが起動するので、そこでcreate-react-native-appで作成されたアプリを実行することができる。

デバッグ方法

デバッグなどは、スマホを振ると管理画面が出てくるので一番下にあるDebug Remote JSをクリックするとPC側でブラウザが起動するのでそこでデバッグすることができる。

設定や便利なnpmモジュール

vsCode

React Native Tools

npmモジュール