[React Native] 基本を学ぶ – Stateでコンポーネントの状態を管理する

はじめに

React Native は、Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。言語としてJavaScriptを使用し、React.jsを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。

この記事では、React Nativeの基本である State について学びます。

Stateとは

Stateは コンポーネントの状態を表すデータ です。状態ですので、状況によって値が変化します。

コンポーネントを制御するデータの種類はPropsとStateの2種類があります。以前Propsについては触れましたが、Propsはコンポーネントを制御するときに渡すデータであることに対し、Stateは状況の変化によってコンポーネントの内部で変わるデータとなります。

Stateを使う

Stateを使ってみましょう。なお、下記の記事で環境構築およびサンプルプロジェクトの作成は済んでいる前提で進めています。

【お試し10分】React Nativeことはじめ！サンプルアプリをサクッと動かす

今回はこちらを参考に「点滅するコンポーネント」を作ってみます。まずは新しく Blink.js を作ります。

Blink.js

　import React, { Component } from 'react';
import { Text } from 'react-native';

export default class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { isShowingText: true };
    setInterval(() => {
      this.setState(previousState => {
        return { isShowingText: !previousState.isShowingText };
      });
    }, props.duration);
  }

  render() {
    const display = this.state.isShowingText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

constructor は、コンポーネントの初期化時に実行されます。引数として props が渡ります。このコンポーネントは props として、次の2つのプロパティを必要とします。

• text : 表示する文字列
• duration : 点滅する間隔（ミリ秒）

またStateとして以下の状態を管理します。

• isShowingText: テキストを表示するか否か

コンストラクタ内の1行目は親クラスの super を呼んでいます。子クラスを作る場合で constructor をオーバーライドする場合は必要です。2行目はStateの初期値を設定しています。Stateの初期値を設定するには this.state にオブジェクトを代入します。

3行目は setInterval を使って、ある一定の間隔ごとに関数を実行しています。関数内では setState を呼び出しています。Stateの値を任意のタイミングで変更するときに使うメソッドです。

setState には状態のオブジェクトを直接渡す方法と、前回の状態を元に新しい状態を返すための関数を渡す方法があります。今回は後者を使っています。

render は isShowingText を元にテキストを表示するか否かを判定し、text を表示するか空文字を表示するか決めています。

BlinkクラスをAppクラスから呼び出してみましょう。

App.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Blink from './Blink';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Blink text="はやい" duration="100" />
        <Blink text="ぼちぼち" duration="500" />
        <Blink text="おそい" duration="1000" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

3つのBlinkクラスに、それぞれ異なる値の text と duration を与えています。

まとめ

コンポーネントを制御するために必要なStateをご紹介しました。PropとStateは、それぞれの目的と役割を理解しておくことが大事です。

• Props: コンポーネントを外部から制御するためのデータ
• State: コンポーネント内部で持つ、コンポーネントの状態を表すデータ

あまり理解しないでその場その場でコードを書き進めていると コンポーネントがどういう状態にあってこの表示になっているのか、よく分からん などといった事象になりかねません。はじめのうちにしっかりと理解しておきましょう。

参考

本記事に執筆にあたり、次の記事を参考にしました。

• State · React Native
• React.Component – React