Headerコンポーネントの定義
まず、Headerコンポーネントを作成しましょう。- VS Codeで、セットアップモジュールで作成した基本的なデモアプリのフォルダを開きます。
srcフォルダ内にcomponentsというフォルダを作成します。このフォルダはテンプレートに既に存在していることがあります。その場合は、フォルダの内容を削除します。- 次のように、
componentsフォルダ内にHeader.tsxという名前のファイルを作成します。
Header.tsxを開き、Reactをインポートします（以下のコードを参照してください）。ここで記述するJSXはJSXトランスフォーマーを使用してReactコンポーネントに変換されるため、Reactをインポートする必要があります。- ヘッダーを作成するために、必要なコンポーネントをreact-nativeからインポートします。ここでは、StyleSheet、Textコンポーネント、Viewコンポーネントが必要です。
- 「Header」という機能コンポーネントを宣言します。アロー関数として宣言することも、関数として宣言することもできます。（このガイドではアロー関数を使用します）。
- 「Vegaへようこそ！」という、ようこそメッセージのあるTextコンポーネントを含むViewコンポーネントを返します。
export const MyComponent = () => {};のように定義するとコンポーネントをエクスポートできます。ただし、通常デフォルトのエクスポートは、エクスポートしたコンポーネントを1回だけインポートする場合、またはファイルごとに1つのコンポーネントをエクスポートする場合に使用されます（参考記事（英語のみ））。
- 以下のexportステートメントを追加します。
Header.tsxのコードは次のようになります。
スタイルの追加
次に、作成した最初のコンポーネントにスタイルを追加します。 StyleSheetは、CSSスタイルシートに似た抽象化レイヤーです。CSSとは異なり、同じタイプの要素間でスタイルをカスケードすることはできません。たとえば、同じスタイルを持つ別々のファイルに要素がある場合、StyleSheetを作成して各ファイルでスタイルを定義する必要があります。- Headerアロー関数の後に、
headerContainerセクションとheaderTextセクションを含むstylesという名前の新しいStyleSheetを作成します。
headerContainerスタイルによって、テキストコンポーネントは中央寄せされ、画面幅いっぱいになります。また、headerTextスタイルによって、テキストのサイズ、太さ、カラーが変更されます。16進数コードのほか、カラーをRGB値（例：‘rgb(50, 50, 50)’）または名前付きカラー（例：‘gray’）に設定することもできます。
- View要素に
headerContainerスタイルを、Text要素にheaderTextスタイルを追加します。
Header.tsxのコードは次のようになります。
Headerコンポーネントのレンダリング
Headerコンポーネントをレンダリングするには、App.tsxにインポートする必要があります。
App.tsxでは、リンクの代わりにヘッダーコンポーネントをインポートするようにインポートを変更します。- Text、ImageBackground、Imageのインポートを削除します。
- スタイルプロパティコンテナを使用してビューにヘッダーをレンダリングします。
- StyleSheetを変更して、コンテナのスタイルのみが表示されるようにします。これにより、アプリの背景色がきれいになります。
App.tsxは次のようになります。
- 次に、シミュレーターに移動して、ヘッダーがどのように表示されるかを確認します。
新しいヘッダー
- Vega Studioを使用している場合は、Vega Extensionを使用してアプリ名の横にある再生ボタンを押します。
- CLIを使用している場合は、Metroサーバーを実行しているターミナルで「r」を押します。
