React Nativeの公式ドキュメントを和訳してみる 9 - Handling Touches(タッチ動作の処理)

注意
  • 当記事はReact Native 0.51の公式ドキュメントの独自和訳です。間違いなどあればご指摘ください。
  • バージョン0.51のドキュメントに準拠します。
  • 参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。
  • 本家サイトではシミュレータがあり、コードを編集しながら実行でき便利です。
  • Facebook社に無断なので怒られたら消します。

元サイト
facebook.github.io

ユーザーのモバイルアプリ内でのアクションは基本的にタッチです。ボタンのタップやリストのスクロール、地図のズームといったようにジェスチャーを組み合わせて使うこともできます。React Nativeで普通のジェスチャーを全て処理するためのコンポーネントを提供します。もっと発展したジェスチャーの認識もできる包括的なジェスチャー応答システムのように処理ができます。しかし、今一番知りたいコンポーネントは基本的なボタンでしょう。

基本的なボタンの表示

Buttonは基本的なボタンコンポーネントを提供します。どんなプラットフォームでもうまく描画されるでしょう。ボタンを表示する簡潔な例はこのようになります。

<Button
  onPress={() => {
    Alert.alert('You tapped the button!');
  }}
  title="Press Me"
/>

これは、iOS上では青いラベルが、そしてAndroid上では角が丸い青背景に白文字が描画されるでしょう。ボタンを押すと”onPress” 関数が呼び出されます。今回の場合はアラートのポップアップが表示されますね。必要ならば、”color” propでボタンの色を変更することもできます。

ボタン描画イメージ
引用元: http://facebook.github.io/react-native/docs/0.51/handling-touches.html

下の例を使ってボタンコンポーネントで色々試して見ましょう。表示されているプラットフォームは右下の切り替えボタンをクリックすれば選択できます。そして、”Tap to Play”をクリックしプレビューを実行しましょう。*1

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

export default class ButtonBasics extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
            color="#841584"
          />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
  },
  buttonContainer: {
    margin: 20
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
})

// Create React Native Appを使っている時はこの行を飛ばす
AppRegistry.registerComponent('AwesomeProject', () => ButtonBasics);

Touchables (タッチ可能コンポーネントたち)

もし基本ボタンの見栄えがアプリに適さなければ、React Nativeが提供する”Touchable”なコンポーネントたちをどれでも使って独自のボタンを構築できます。”Touchable”コンポーネントたちはタップジェスチャーを捕捉でき、ジェスチャーが認識された時にフィードバックを画面に表示することができます。このコンポーネントはデフォルトのスタイルはありませんが、しかし、だからこそアプリ内で見栄えよくジェスチャーを取得するのは簡単です。

どの“Touchable”コンポーネントを使うかは、どんなフィードバックをユーザーに返したいかに依ります。

  • 一般的には、webでボタンやリンクを使っていたような場所ならばどこでも”TouchableHighlight”が使えます。ボタンを押すと、その背景が暗くなります。
  • Androidでは、”TouchableNativeFeedback”も検討に上がるかもしれません。インクサーフェイスリアクションリップル(さざ波アニメーション)でユーザーのタッチに反応します。
  • TouchableOpacityはフィードバックにボタンのopacityを薄くします。ボタンを押し込んだ時、ボタンの背景が透けて見えるようになります。
  • もしタップジェスチャーは処理したいけれども画面にフィードバックを表示したくない時は、TouchableWithoutFeedbackを使いましょう。


いくつかのケースでは、ユーザーがボタンを押し続けている時間を測定したいときもあるでしょう。こういった長押しは、どのTouchableコンポーネントでもonLongPress のpropを通じて処理することができます。

これら全てを動作の中で確認してみましょう。

import React, { Component } from 'react';
import { Alert, AppRegistry, Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  _onLongPressButton() {
    Alert.alert('You long-pressed the button!')
  }


  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableHighlight</Text>
          </View>
        </TouchableHighlight>
        <TouchableOpacity onPress={this._onPressButton}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableOpacity</Text>
          </View>
        </TouchableOpacity>
        <TouchableNativeFeedback
            onPress={this._onPressButton}
            background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
          </View>
        </TouchableNativeFeedback>
        <TouchableWithoutFeedback
            onPress={this._onPressButton}
            >
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>Touchable with Long Press</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 60,
    alignItems: 'center'
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    padding: 20,
    color: 'white'
  }
})

// Create React Native Appを使っている時はこの行を飛ばす
AppRegistry.registerComponent('AwesomeProject', () => Touchables);

リストのスクロール、ページのスワイプ、ピンチでのズーム

モバイルアプリでよく使うジェスチャーは、他にはスワイプやパンがありますね。このジェスチャーはアイテムリストをスクロールしたり、要素のページ間をスワイプするのに使います。これら含めた他のジェスチャーを操作するために、次はスクロールビューの使い方を学びましょう。

*1:本家サイトではシミュレータがあり、コードを編集しながら実行でき便利です。