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

タッチ操作の処理

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

基本的なボタンの表示​

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

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

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

以下の例を使ってButtonコンポーネントを試してみてください。右下のトグルをクリックしてアプリがプレビューされるプラットフォームを選択し、「Tap to Play」をクリックしてアプリをプレビューできます。

Touchables​

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

使用する「Touchable」コンポーネントは、提供したいフィードバックの種類によって異なります

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

  • Android では、ユーザーのタッチに反応するインク表面の波紋を表示するために、TouchableNativeFeedback の使用を検討することをお勧めします。

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

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

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

これらすべてを実際に見てみましょう

スクロールとスワイプ​

タッチスクリーンデバイスで一般的に使用されるジェスチャーには、スワイプとパンがあります。これらにより、ユーザーはアイテムのリストをスクロールしたり、コンテンツのページをスワイプしたりできます。これらの詳細については、ScrollView コアコンポーネントを参照してください。

既知の問題​

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