跳到主要內容

處理觸控

使用者主要透過觸控與行動應用程式互動。他們可以使用手勢組合，例如點擊按鈕、捲動列表或縮放地圖。React Native 提供了組件來處理各種常見手勢，以及全面的手勢回應系統，以實現更進階的手勢辨識，但您最感興趣的組件很可能是基本的 Button。

顯示基本按鈕​

Button 提供了一個基本按鈕組件，可以在所有平台上良好地呈現。顯示按鈕的最簡範例如下

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

這將在 iOS 上呈現藍色標籤，在 Android 上呈現帶有淺色文字的藍色圓角矩形。按下按鈕將呼叫 "onPress" 函數，在本例中，該函數會顯示一個警示彈出視窗。如果您願意，您可以指定 "color" 屬性來更改按鈕的顏色。

繼續使用下面的範例來試用 Button 組件。您可以透過點擊右下角的切換按鈕，然後點擊 "Tap to Play" 來預覽應用程式，以選擇您的應用程式預覽的平台。

可觸控元件​

如果基本按鈕的外觀不適合您的應用程式，您可以使用 React Native 提供的任何 "Touchable" 組件來建立自己的按鈕。這些組件提供了捕捉點擊手勢的功能，並在辨識到手勢時顯示回饋。但是，這些組件不提供任何預設樣式，因此您需要做一些工作才能讓它們在您的應用程式中看起來美觀。

您使用的 "Touchable" 組件將取決於您想要提供的回饋類型

  • 一般來說，您可以在任何您會在網頁上使用按鈕或連結的地方使用 TouchableHighlight。當使用者按下按鈕時，視圖的背景將會變暗。

  • 您可以考慮在 Android 上使用 TouchableNativeFeedback 來顯示墨水表面反應波紋，以回應使用者的觸控。

  • TouchableOpacity 可以透過降低按鈕的不透明度來提供回饋，讓使用者在按下的同時可以看到背景。

  • 如果您需要處理點擊手勢，但不希望顯示任何回饋，請使用 TouchableWithoutFeedback。

在某些情況下，您可能想要偵測使用者何時按住視圖一段設定的時間。這些長按可以透過將函數傳遞給任何 "Touchable" 組件的 onLongPress 屬性來處理。

讓我們看看所有這些的實際效果

滾動與滑動​

觸控螢幕裝置上常用的手勢包括滑動和平移。這些手勢讓使用者可以捲動瀏覽項目列表，或滑動瀏覽內容頁面。對於這些手勢，請查看 ScrollView 核心組件。

已知問題​

  • react-native#29308：觸控區域永遠不會超出父視圖邊界，且 Android 不支援負邊距。