- 移動(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)容。
處理其他的手勢
- 如果你想實(shí)現(xiàn)視圖的拖拽助泽,或是實(shí)現(xiàn)自定義的手勢啰扛,那么請參閱PanResponder API或是手勢識別系統(tǒng)的文檔。