處理觸摸事件

  • 移動(dòng)應(yīng)用上的用戶交互基本靠“摸”。當(dāng)然,“摸”也是有各種姿勢的:在一個(gè)按鈕上點(diǎn)擊,在一個(gè)列表上滑動(dòng)涛贯,或是在一個(gè)地圖上縮放楚堤。
  • React Native提供了可以處理常見觸摸手勢(例如點(diǎn)擊或滑動(dòng))的組件疫蔓, 以及可用于識別更復(fù)雜的手勢的完整的手勢響應(yīng)系統(tǒng)

可點(diǎn)擊的組件

  • 在需要捕捉用戶點(diǎn)擊操作時(shí)身冬,可以使用"Touchable"開頭的一系列組件衅胀。這些組件通過onPress屬性接受一個(gè)點(diǎn)擊事件的處理函數(shù)。當(dāng)一個(gè)點(diǎn)擊操作開始并且終止于本組件時(shí)(即在本組件上按下手指并且抬起手指時(shí)也沒有移開到組件外)酥筝,此函數(shù)會被調(diào)用滚躯。
class MyButton extends Component {
 _onPressButton() {
   console.log("You tapped the button!");
 }

 render() {
   return (
     <TouchableHighlight onPress={this._onPressButton}>
       <Text>Button</Text>
     </TouchableHighlight>
   );
 }
}
  • 可點(diǎn)擊的組件需要給用戶提供視覺反饋,例如是哪個(gè)組件正在響應(yīng)用戶的操作嘿歌,以及當(dāng)用戶抬起手指后會發(fā)生什么掸掏。用戶也應(yīng)該可以通過把手指移到一邊來取消點(diǎn)擊操作。

  • 具體使用哪種組件宙帝,取決于你希望給用戶什么樣的視覺反饋:

  • 一般來說丧凤,你可以使用TouchableHighlight來制作按鈕或者鏈接。注意此組件的背景會在用戶手指按下時(shí)變暗步脓。

  • 在Android上還可以使用TouchableNativeFeedback愿待,它會在用戶手指按下時(shí)形成類似墨水漣漪的視覺效果浩螺。

  • TouchableOpacity會在用戶手指按下時(shí)降低按鈕的透明度,而不會改變背景的顏色仍侥。

  • 如果你想在處理點(diǎn)擊事件的同時(shí)不顯示任何視覺反饋要出,則需要使用TouchableWithoutFeedback

長按

  • 某些場景中你可能需要檢測用戶是否進(jìn)行了長按操作农渊』减澹可以在上面列出的任意組件中使用onLongPress屬性來實(shí)現(xiàn)。

在列表中上下滑動(dòng)和在視圖上左右滑動(dòng)

  • 可滾動(dòng)的列表是移動(dòng)應(yīng)用中一個(gè)常見的模式砸紊。用戶會在列表中或快或慢的各種滑動(dòng)传于。ScrollView組件可以滿足這一需求。
  • ScrollView可以在垂直或水平方向滾動(dòng)批糟,還可以配置pagingEnabled
    屬性來讓用戶整屏整屏的滑動(dòng)格了。此外看铆,水平方向的滑動(dòng)還可以使用Android上的ViewPagerAndroid 組件徽鼎。
  • ListView則是一種特殊的ScrollView,用于顯示比較長的垂直列表弹惦。它還可以顯示分區(qū)塊的頭部和尾部否淤,類似iOS上的UITableView控件。

雙指縮放

  • 如果在ScrollView中只放置一個(gè)組件棠隐,則可以用來實(shí)現(xiàn)縮放操作石抡。設(shè)置maximumZoomScale和minimumZoomScale屬性即可以使用戶能夠縮放其中的內(nèi)容。

處理其他的手勢

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嗡贺,一起剝皮案震驚了整個(gè)濱河市隐解,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌诫睬,老刑警劉巖煞茫,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異摄凡,居然都是意外死亡续徽,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進(jìn)店門亲澡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來钦扭,“玉大人,你說我怎么就攤上這事床绪】颓椋” “怎么了捎琐?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長裹匙。 經(jīng)常有香客問我瑞凑,道長,這世上最難降的妖魔是什么概页? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任籽御,我火速辦了婚禮,結(jié)果婚禮上惰匙,老公的妹妹穿的比我還像新娘技掏。我一直安慰自己,他們只是感情好项鬼,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布哑梳。 她就那樣靜靜地躺著,像睡著了一般绘盟。 火紅的嫁衣襯著肌膚如雪鸠真。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天龄毡,我揣著相機(jī)與錄音吠卷,去河邊找鬼。 笑死沦零,一個(gè)胖子當(dāng)著我的面吹牛祭隔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播路操,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼疾渴,長吁一口氣:“原來是場噩夢啊……” “哼伟叛!你這毒婦竟也來了跨蟹?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤旦袋,失蹤者是張志新(化名)和其女友劉穎祭钉,沒想到半個(gè)月后瞄沙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡慌核,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年距境,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片垮卓。...
    茶點(diǎn)故事閱讀 38,617評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡垫桂,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出粟按,到底是詐尸還是另有隱情诬滩,我是刑警寧澤霹粥,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站疼鸟,受9級特大地震影響后控,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜空镜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一浩淘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吴攒,春花似錦张抄、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至镣隶,卻和暖如春极谊,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背矾缓。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工怀酷, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嗜闻。 一個(gè)月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像桅锄,于是被迫代替她去往敵國和親琉雳。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,754評論 25 707
  • 事件 移動(dòng)應(yīng)用中常用的事件 處理事件的條件: 在iOS中友瘤,不是任何對象都能處理事件翠肘,只有繼承了UIResponde...
    叫我Dragon閱讀 1,800評論 0 1
  • 真正喜歡上畫畫是在骨折以后在家休養(yǎng)很長一段時(shí)間以后,可能身體上的疼痛會讓人變得不那么浮躁辫秧,可以靜下心來真正投入...
    Kitty北京閱讀 492評論 0 1
  • 在生活中盟戏,我們經(jīng)常會有需要將智慧很好地傳播出去的時(shí)候绪妹,然而,有時(shí)候柿究,腦子里一大堆的東西邮旷,就是沒辦法清晰明了的講出去...
    纖陌顏閱讀 414評論 0 2