ReactNative

【React Native】新規画面作成方法

はじめに

今回はReact Nativeで新規画面を作成する方法を解説します。
サンプルプログラムでは、新規画面を作成し、画面に「Hello World!!」と出力してみます。

開発環境

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

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

開発準備

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

新規画面PGM格納用フォルダ作成

次に新規画面PGMを作成する準備をします。

プロジェクトフォルダの直下に「screens」というフォルダを作成し、その中に「HelloWorldScreen.js」というファイルを作成してください。

新規画面PGMの雛形作成

作成しましたら、「HelloWorldScreen.js」にReactNativeの雛形を書いていきます。

上記雛形を解説します。

下記のインポート文はReactとReactNativeのライブラリ使用しますよーという意味でこれらの記述はReactNativeを使用するためには必ず記述しなければなりません。

下記はHelloWorldScreenという名のコンポーネントを作成しますよーという意味です。

また、コンポーネントを作成する際はクラス名以外は毎回同じ記述になります。

そして、コンポーネントには必ずrender()関数を持っており、render()関数が返すreturn ()の中身がアプリ画面上に描画されます。

このrender()関数は画面が呼び出されたり、画面の状態が変わったりすると必ず実行されます。

最後の一文は、後にこのHelloWorldScreenコンポーネント)を取り入れることをインポートすると言いますが、そのためには以下のように記述し、HelloWorldScreenがエクスポートすることを許可しなければいけません。

画面に表示するメッセージを記述

次に画面に「Hello World!!」と表示するためにTextタグというものをします。
Textタグは画面に文字列を表示する際に使用します。

それでは、HelloWorldScreenにタグを追加して「Hello World!!」と表示されるよう改修していきましょう。

App.jsの修正

次にHelloWorldScreenコンポーネントをApp.jsから呼び出すようApp.jsを修正していきます。

App.jsから呼び出すには、まずHelloWorldScreenコンポーネントをインポートする必要があります。
インポート文の構文は以下の通りです。

そして、コンポーネントを使用するには<コンポーネント名/>というように記述してやればOKです。
これらをふまえてHelloWorldScreenコンポーネントの内容を出力するようコーディングすると、以下のようになります。

■ App.js

動作確認

最後にターミナルでプロジェクトフォルダに移動し、iOSのシミュレータが起動してください。
以下のように表示されていればOKです。

以上で新規画面の作成は完了です。