0
0
Read Time:54 Second
Windows 11上のHyper-VでゲストOS（Windows 10）を使用し、VS CodeでReact Nativeを使ってAndroidスマートフォン向けに”Hello World”を表示するネイティブアプリを作成する手順を詳しく説明します。このプロセスにはいくつかのステップが含まれますが、一歩ずつ丁寧に進めていきましょう。
１．前提条件
別記事「[基礎知識]React Native開発環境準備」／１．基本手順・前提環境
開発環境準備はこちらで詳しく解説してありますので参照願います。
※上記「１．基本手順・前提環境」を読んだ後、以下に続きます。
２．新規プロジェクト作成
(1)コマンドプロンプトまたはPowerShellで、プロジェクトを作成したいディレクトリに移動します。
(2)以下のコマンドを実行して、新しいReact Nativeプロジェクトを作成します。
> npx react-native init test01
エラー「TypeError: cli.init is not a function・・・」が表示された場合の対処方法
※もしここで、「TypeError: cli.init is not a function・・・」のエラーが表示された場合は、React Native CLIの実行に問題があることを意味します。おそらく以前グローバルにインストールしたreact-native-cliと競合していることが想定されます。以下のメッセージが表示されました。原因は何でしょうか？どうすれば解決できますか？コマンドを実行してみて下さい。
① npm uninstall -g react-native-cli
② react-native -v
→※ここで「’react-native’ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と表示されればアンインストールが完了しています。
③ 上記で作成したプロジェクトフォルダ（例：ここでは”test01”）を削除して下さい。※削除できない場合はOSを再起動後、再度削除を試みて下さい。
④ 以下のコマンドで、react-native-cli をインストールします。
npm install -g react-native-cli
⑤ 以下のコマンドで、再度、プロジェクトを新規作成します。
npx react-native init test01
(3)上記作成したプロジェクトフォルダ配下に移動します。
> cd test01
上記で新規プロジェクト作成は完了です。
３．Androidエミュレータでのアプリ起動
別記事「[基礎知識]React Native / Android App ビルド (with AVDエミュレート)」
Androidエミュレータでのアプリ起動はこちらで詳しく解説してありますので参照願います。
※実行後のイメージは以下の通りです。
上記により、React Nativeプロジェクトが正常にセットアップされ、エミュレーターでアプリが実行されたことを確認後、以下に続きます。
４．VS Code での開発の始め方
上記環境作成、プロジェクト作成、エミュレータ起動完了後は、以下の手順で、実際の成果物作成を行う事になります。
(1)VS Codeを開き、「ファイル」メニューから「フォルダーを開く」を選択し、React Nativeプロジェクトのルートフォルダを開きます。
(2)エクスプローラービューでApp.tsxをクリックして開きます。
(3)App.tsx内に記載されているコンポーネントを編集または追加して、アプリケーションの見た目や機能を変更します。
(4)編集後にファイルを保存し、エミュレーターでアプリをリロードすると、変更が反映されます。エミュレーターでデベロッパーメニューを開いて「Reload」を選択するか、rキーを押すことでリロードできます（Metroバンドラーが起動しているコマンドプロンプトでrを入力します）。
React Native / Android App 作成手順は、以上です。
Happy
0 %
Sad
0 %
Excited
0 %
Sleepy
0 %
Angry
0 %
Surprise
0 %