buttonとイベント【これからはじめるReact Native】

React Native これからはじめるReact Native

はじめに

前回はTextInputコンポーネントと、入力されてからのイベントについてご紹介しました。

TextInputとイベント【これからはじめるReact Native】

今回は、よくある特定のボタンを押した時の動作について解説していきます。
またstateについても前回解説しましたが、今回はpropsの使い方についても解説していきます。

buttonとイベント

では、お馴染みのExpoからOpen Snackでコードを書いていきます。

App.js を開き、View の中身を消してみましょう。

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>

      </View>
    );
  }
}

次にButtonコンポーネントをドラッグ＆ドロップでViewの間に追加します。

import React, { Component } from 'react';
import { Text, View, StyleSheet, Button, Alert } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-elements'; // 0.18.5

export default class App extends Component {
  _handleButtonPress = () => {
    Alert.alert(
      'Button pressed!',
      'You did it!',
    );
  };

  render() {
    return (
      <View style={styles.container}>

        <Button
          title="Press me"
          style={styles.button}
          onPress={this._handleButtonPress}
        />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

このようなボタンが表示されるはずです。

そしてボタンを押してみましょう。

You did it! と表示されます。

では、この挙動を実現しているコードを詳しく見ていきましょう。

import { Text, View, StyleSheet, Button, Alert } from 'react-native';
2行目のこちらですが、Buttonコンポーネントがimportされています。

次にイベントを見ていきます。

  _handleButtonPress = () => {
    Alert.alert(
      'Button pressed!',
      'You did it!',
    );
  };

Alert は名前の通りアラートを出してくれます。
例えばこのように配列形式で値を渡すと、複数項目がアラートのボックスに表示され、またそれぞれのクリックイベント（onPressイベント）にイベントを仕込むことができます。

    Alert.alert(
      'Button pressed!',
      'You did it!',
      [
        {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
        {text: 'OK', onPress: () => console.log('OK Pressed')},
      ],
    );

Alert 公式リファレンス

次にButton部分を見てみましょう。

<Button
  title="Press me"
  style={styles.button}
  onPress={this._handleButtonPress}
/>

Buttonコンポーネントを使用し、title や style を指定し、最後にonPress でイベントを指定しています。
onPress には先程見た _handleButtonPress イベントを仕込んでいます。

Buttonのリファレンスを見てみましょう。
Button コンポーネント公式リファレンス
様々なpropsが存在しています。
例えばdisabledを指定してみましょう。

<Button
  title="Press me"
  style={styles.button}
  disabled
  onPress={this._handleButtonPress}
/>

するとこのようにボタンが押せなくなっています。

props

では、リファレンスに書いてあったpropsとは何のことでしょうか。
props はそのコンポーネントの属性のようなものです。
コンポーネントの属性として値を設定することができます。

ですが、前回の記事でstateというものをご紹介しました。
stateにも値を設定することができましたね。
この違いはどこにあるのでしょうか。

props の特徴は何といっても不変（immutable）であり、親コンポーネントから子コンポーネントに渡されるものであるということです。

それに対してstate はあくまでも状態を表したもので、可変（mutable）なものです。

ちょっと一言

前回、this.state の値はimmutableにすべきと解説しました。紛らわしいところですが、state自体はmutableですが、this.stateから直接更新するのではなく、setStateから更新すべきimmutableな存在なのです。

つまり、Button コンポーネントのpropsにはdisableがあり、そちらに値を設定が可能であるということです。
但し、disableはboolean（真偽値）であり、値を省略してもtrueとなります。
trueとなった場合に、Button コンポーネント内でボタンを押せなくする処理が行われています。
Buttonコンポーネントのソースコード

まとめ

今回はButtonコンポーネント及びそのイベント、またリファレンスの見方やpropsについてご紹介しました。
React Nativeのリファレンスはとても見やすく、またGitHubのソースコードへのアクセスも容易です。
まだ新しい技術ということもあり、リファレンスはもちろん、躓いたときにはソースコードも見る癖をつけると良いでしょう。