メインコンテンツにスキップ

タッチ操作の処理

ユーザーは主にタッチを通じてモバイルアプリとやり取りします。ボタンをタップしたり、リストをスクロールしたり、マップをズームしたりするなど、さまざまなジェスチャーを組み合わせて使用​​できます。React Nativeは、あらゆる種類の一般的なジェスチャーを処理するためのコンポーネントと、より高度なジェスチャー認識を可能にする包括的なジェスチャーレスポンダーシステムを提供しますが、最も関心がある可能性が高いコンポーネントは、基本的なButtonです。

基本的なボタンの表示​

Buttonは、すべてのプラットフォームで適切にレンダリングされる基本的なボタンコンポーネントを提供します。ボタンを表示するための最小限の例は次のとおりです

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

これにより、iOSでは青いラベル、Androidでは明るいテキストの青い丸みを帯びた長方形がレンダリングされます。ボタンを押すと、「onPress」関数が呼び出され、この場合はアラートポップアップが表示されます。必要に応じて、「color」プロパティを指定して、ボタンの色を変更できます。

下の例を使用して、Buttonコンポーネントを試してみてください。右下のトグルをクリックしてアプリのプレビュープラットフォームを選択し、「タップして再生」をクリックしてアプリをプレビューできます。

Touchable​

基本的なボタンがアプリに適していない場合は、React Nativeが提供する「Touchable」コンポーネントのいずれかを使用して独自のボタンを作成できます。「Touchable」コンポーネントは、タップジェスチャーをキャプチャする機能を提供し、ジェスチャーが認識されたときにフィードバックを表示できます。ただし、これらのコンポーネントはデフォルトのスタイルを提供しないため、アプリで適切に見えるようにするには少し作業が必要です。

どの「Touchable」コンポーネントを使用するかは、どのようなフィードバックを提供するかによって異なります

  • 一般的に、ウェブでボタンやリンクを使用する場所であればどこでもTouchableHighlightを使用できます。ユーザーがボタンを押すと、ビューの背景が暗くなります。

  • Androidでは、ユーザーのタッチに反応するインクサーフェスリアクションリップルを表示するためにTouchableNativeFeedbackを使用することを検討できます。

  • TouchableOpacityを使用すると、ボタンの不透明度を下げてフィードバックを提供できます。これにより、ユーザーが押している間、背景が透けて見えるようになります。

  • タップジェスチャーを処理する必要があるが、フィードバックを表示したくない場合は、TouchableWithoutFeedbackを使用します。

場合によっては、ユーザーがビューを一定時間押したままにしたことを検出したい場合があります。これらの長押しは、「Touchable」コンポーネントのいずれかのonLongPressプロパティに関数を渡すことで処理できます。

これらすべてがどのように動作するかを見てみましょう

スクロールとスワイプ​

タッチ可能な画面を備えたデバイスで一般的に使用されるジェスチャーには、スワイプやパンなどがあります。これらにより、ユーザーは項目のリストをスクロールしたり、コンテンツのページをスワイプしたりできます。これらについては、ScrollViewコアコンポーネントを確認してください。

既知の問題​

  • react-native#29308: タッチ領域は親ビューの境界を超えることはなく、Androidでは負のマージンはサポートされていません。