React Native入門 2 コンポーネントの実装

今回扱う範囲

前回の記事では、コードを眺めて、App.jsを解剖していきました。
今回は、React Nativeの開発においてもっとも重要な、コンポーネントについて扱います。

コンポーネントとは

Reactにおけるコンポーネントとは、画面を構成するパーツだと思ってください。

App.js

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

この、class Appもコンポーネントです。また、ViewやTextなどもコンポーネントです。ReactやReact Nativeでは、このように自分で作ったコンポーネントや、もともとあるTextなどのコンポーネントを組み上げて、画面のコンポーネントを組み立てていきます。

再利用性

Reactのコンポーネントの大きな特徴として、再利用可能であることが挙げられます。
たとえば、アプリにはどの画面にも共通のパーツがあると思いますが、そのパーツをコンポーネントとして一箇所で実装し、他のところから参照することで、同じコードを繰り返して書かずに済みます。
実際にコンポーネントを作って、これらを体感してみましょう。
前回は、traineeという名前でアプリを作ったので、それを利用しているものとします。

trainee
- __tests__
- App.js
- index.js
- ios
- android
- package.json
- app.json
- node_modules
- src (今回作る)
  - components (今回作る)
    - sample.js
...

こんな感じのプロジェクト構成でいきます。

$ mkdir src
$ cd src
$ mkdir components

componentsの中にsample.jsを作りSampleという名前のコンポーネントを作ってみましょう。

src/components/sample.js

export default class Sample extends Component{
  render() {
    return (
    <View>
      <Text>
         Hello Component
      </Text>
    </View>
    );
  }
}

これでコンポーネントができました。export default としているので、他のファイルから読み込めるようになります。App.jsの中で呼び出してみましょう。

App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
/* Sampleのコンポーネントをimportする。App内にSampleタグを追加する。*/
import Sample from './src/components/sample'

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Sample />
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

App.jsの中に、import文を書き、さらに<Sample />を書きました。
<Sample></Sample>と同じ意味です。タグの中身に何も書かないときはこのように書くと簡潔に済みます。

これでリロードしてみると、実際に、Sampleの中で定義したものが画面にレンダリングされていることがわかります。

まとめ

今回は、1章で学んだことを実際にアウトプットするために、コンポーネントを別ファイルに記述し、実際に呼び出して使うということを、手を動かして学びました。
ただ、まだ複数の画面を作ったりしてないのでこの恩恵は薄いかもしれません。
というわけで、次回は複数の画面を作って、画面遷移をするために、ルーティングというものを学びます。