javascript

【React Native】プロジェクト作成時の雛形App.jsについて

はじめに

今回はReact Nativeのプロジェクト作成時に雛形として作成されるApp.jsの解説をします。
サンプルプログラムでは、React Nativeを起動し、画面に「Hello World!!」と出力します。

開発環境

以降、以下のバージョン、環境での解説となります。

OS:Mac
React:16.5.0
Expo React Native:31.0.0
Expo:57.2.1
エディタ:Visual Studio Code

開発準備

ますは以下のコマンドでテストプロジェクトを作成します。
テンプレートはblankを設定してください。

プロジェクトの作成が終わったら、エディタでApp.jsを開いてください。

開くと以下のようなReact Nativeの雛形がコーディングがされていると思います。

訳わかんないですよね。。。
次の章で詳しく説明します。

App.jsの解説

App.jsとは

React Nativeの画面構成を担うPGMで、起動すると必ず呼び出され、このPGMの内容がそのまま画面に出力されます。

かといって、App.jsに全画面内容を書くわけではありません。

基本的には画面や機能ごとにファイルを分け、最後にApp.jsで呼び出すというのがReact Nativeの書き方です。

App.jsの構文解析

App.jsの中身を詳しくみていきます。
まずは、インポート文の部分ですが、1行目はReact言語使いますよーというお決まり文句です。

2行目は使用するライブラリによって変わります。
雛形ではスマホの各要素をグループ化できるライブラリである「View」を使用しております。

クラスの宣言部分ですが、Reactの部品を使いますよーという宣言をし、他のPGMから呼び出しできるようexportしてます。

そして、render()関数ですが、画面起動時に{}で囲ってる部分実行するというメソッドです。

returnで画面要素を返却します。

画面要素ですが、JSXと呼ばれるHTMLとJavaScript組み合わせたような特殊な構文でコーディングします。難しく聞こえるかもしれませんが、慣れたらそんなに難しくないです。

そして、最後にまとめてスタイルを定義してます。
ここのスタイルは上記の「styles.container」と紐づいてます。

画面に「Hello World!!」と出力してみよう

それでは次に試しに画面に「Hello World!!」と出力してみましょう。
まず、Textタグで囲まれた部分を「Hello World!!」に変更します。

次にターミナルでプロジェクトフォルダに移動し、以下のコマンドを実行してください。

ターミナルをもう一つ起動し、以下のコマンドを実行してください。

すると、iOSのシミュレータが起動しますので、
以下のように表示されていればOKです。