Headerコンポーネントの作成

Headerコンポーネントの定義

まず、Headerコンポーネントを作成しましょう。

• VS Codeで、セットアップモジュールで作成した基本的なデモアプリのフォルダを開きます。
• srcフォルダ内にcomponentsというフォルダを作成します。このフォルダはテンプレートに既に存在していることがあります。その場合は、フォルダの内容を削除します。
• 次のように、componentsフォルダ内にHeader.tsxという名前のファイルを作成します。

src/
├── components/
│   └── Header.tsx
└── App.tsx

• Header.tsxを開き、Reactをインポートします（以下のコードを参照してください）。ここで記述するJSXはJSXトランスフォーマーを使用してReactコンポーネントに変換されるため、Reactをインポートする必要があります。
• ヘッダーを作成するために、必要なコンポーネントをreact-nativeからインポートします。ここでは、StyleSheet、Textコンポーネント、Viewコンポーネントが必要です。

import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';

StyleSheet、Text、Viewが中かっこで囲まれているのは、名前付きエクスポートであるためです。これについては、パート2で詳しく説明します。

• 「Header」という機能コンポーネントを宣言します。アロー関数として宣言することも、関数として宣言することもできます。（このガイドではアロー関数を使用します）。

const Header = () => {
  // またはfunction Header() {
};

• 「Vegaへようこそ！」という、ようこそメッセージのあるTextコンポーネントを含むViewコンポーネントを返します。

const Header = () => {
  return (
    <View>
      <Text>Vegaへようこそ！</Text>
    </View>
  );
};

画面上に配置しやすいように、TextコンポーネントをViewコンポーネントでラップしています。Textコンポーネントでは、Viewで使用するFlexBoxレイアウトシステムを使用しません（詳細については、こちら（英語のみ）を参照してください）。Viewでラップすると、FlexBoxレイアウトシステムを使用して、Textコンポーネントを任意の場所に配置できます。

最後に、コンポーネントをエクスポートする必要があります。export const MyComponent=（）=>{};のように定義するとコンポーネントをエクスポートできます。ただし、通常デフォルトのエクスポートは、エクスポートしたコンポーネントを1回だけインポートする場合、またはファイルごとに1つのコンポーネントをエクスポートする場合に使用されます（参考記事（英語のみ））。

• 以下のexportステートメントを追加します。

export default Header;

するとHeader.tsxのコードは次のようになります。

import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Header = () => {
  return (
    <View>
      <Text>Vegaへようこそ！</Text>
    </View>
  );
};

export default Header;

スタイルの追加

次に、作成した最初のコンポーネントにスタイルを追加します。

StyleSheetは、CSSスタイルシートに似た抽象化レイヤーです。CSSとは異なり、同じタイプの要素間でスタイルをカスケードすることはできません。たとえば、同じスタイルを持つ別々のファイルに<View>要素がある場合、StyleSheetを作成して各ファイルでスタイルを定義する必要があります。

• Headerアロー関数の後に、headerContainerセクションとheaderTextセクションを含むstylesという名前の新しいStyleSheetを作成します。

const styles = StyleSheet.create({
  headerContainer: {
    padding: 10,
    alignItems: 'center',
    backgroundColor: '#232F3E',
    width: '100%',
  },
  headerText: {
    fontSize: 50,
    fontWeight: '700',
    color: '#FF9900',
  },
});

headerContainerスタイルによって、テキストコンポーネントは中央寄せされ、画面幅いっぱいになります。また、headerTextスタイルによって、テキストのサイズ、太さ、カラーが変更されます。16進数コードのほか、カラーをRGB値（例：'rgb(50, 50, 50)'）または名前付きカラー（例：'gray'）に設定することもできます。

• View要素にheaderContainerスタイルを、Text要素にheaderTextスタイルを追加します。

<View style={styles.headerContainer}>
  <Text style={styles.headerText}>Vegaへようこそ！</Text>
</View>;

最終的なHeader.tsxのコードは次のようになります。

import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Header = () => {
  return (
    <View style={styles.headerContainer}>
      <Text style={styles.headerText}>Vegaへようこそ！</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  headerContainer: {
    padding: 10,
    alignItems: 'center',
    backgroundColor: '#232F3E',
    width: '100%',
  },
  headerText: {
    fontSize: 50,
    fontWeight: '700',
    color: '#FF9900',
  },
});

export default Header;

Headerコンポーネントのレンダリング

Headerコンポーネントをレンダリングするには、App.tsxにインポートする必要があります。

• App.tsxでは、リンクの代わりにヘッダーコンポーネントをインポートするようにインポートを変更します。
• Text、ImageBackground、Imageのインポートを削除します。
• スタイルプロパティコンテナを使用してビューにヘッダーをレンダリングします。
• StyleSheetを変更して、コンテナのスタイルのみが表示されるようにします。これにより、アプリの背景色がきれいになります。

App.tsxは次のようになります。

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import Header from './components/Header';

export const App = () => {
  return (
    <View style={styles.container}>
      <Header />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#232F3E',
  },
});

• 次に、シミュレーターに移動して、ヘッダーがどのように表示されるかを確認します。

高速リフレッシュによってヘッダーが自動的に表示されるはずですが、表示されない場合はアプリを手動で更新できます。

• Vega Studioを使用している場合は、Vega Extensionを使用してアプリ名の横にある再生ボタンを押します。
• CLIを使用している場合は、Metroサーバーを実行しているターミナルで「r」を押します。

次へ