React Native 提供了可以處理常見觸摸手勢（例如點擊或滑動）的組件， 以及可用于識別更復雜的手勢的完整的手勢響應系統。

Button是一個簡單的跨平臺的按鈕組件。下面是一個最簡示例：

<ButtononPress={() => {Alert.alert('你點擊了按鈕！');}}title="點我！"
/>

Touchable 系列組件

使用哪種組件，取決于你希望給用戶什么樣的視覺反饋：

TouchableHighlight：制作按鈕或者鏈接，注意此組件的背景會在用戶手指按下時變暗。

在 Android 上可以使用TouchableNativeFeedback：它會在用戶手指按下時形成類似墨水漣漪的視覺效果。

TouchableOpacity：會在用戶手指按下時降低按鈕的透明度，而不會改變背景的顏色。

TouchableWithoutFeedback：在處理點擊事件的同時不顯示任何視覺反饋使用。

某些場景中你可能需要檢測用戶是否進行了長按操作。可以在上面列出的任意組件中使用onLongPress屬性來實現。

---

上面幾個API使用代碼栗子：

import React, { Component } from 'react';
import { Alert, Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';export default class Touchables extends Component {_onPressButton() {Alert.alert('You tapped the button!')}_onLongPressButton() {Alert.alert('You long-pressed the button!')}render() {return (<View style={styles.container}><TouchableHighlight onPress={this._onPressButton} underlayColor="white"><View style={styles.button}><Text style={styles.buttonText}>TouchableHighlight</Text></View></TouchableHighlight><TouchableOpacity onPress={this._onPressButton}><View style={styles.button}><Text style={styles.buttonText}>TouchableOpacity</Text></View></TouchableOpacity><TouchableNativeFeedbackonPress={this._onPressButton}background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}><View style={styles.button}><Text style={styles.buttonText}>TouchableNativeFeedback</Text></View></TouchableNativeFeedback><TouchableWithoutFeedbackonPress={this._onPressButton}><View style={styles.button}><Text style={styles.buttonText}>TouchableWithoutFeedback</Text></View></TouchableWithoutFeedback><TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white"><View style={styles.button}><Text style={styles.buttonText}>Touchable with Long Press</Text></View></TouchableHighlight></View>);}
}const styles = StyleSheet.create({container: {paddingTop: 60,alignItems: 'center'},button: {marginBottom: 30,width: 260,alignItems: 'center',backgroundColor: '#2196F3'},buttonText: {textAlign: 'center',padding: 20,color: 'white'}
})

處理在列表中上下滑動，或是在視圖上左右滑動

ScrollView是一個通用的可滾動的容器，你可以在其中放入多個組件和視圖，而且這些組件并不需要是同類型的。ScrollView 不僅可以垂直滾動，還能水平滾動（通過horizontal屬性來設置）。

代碼栗子：

import React from 'react';
import { Image, ScrollView, Text } from 'react-native';const logo = {uri: 'https://reactnative.dev/img/tiny_logo.png',width: 64,height: 64
};export default App = () => (<ScrollView><Text style={{ fontSize: 96 }}>Scroll me plz</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>If you like</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>Scrolling down</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>What's the best</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>Framework around?</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 80 }}>React Native</Text></ScrollView>
);

使用長列表

React Native 提供了幾個適用于展示長列表數據的組件，一般而言會選用FlatList或是SectionList。

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';const styles = StyleSheet.create({container: {flex: 1,paddingTop: 22},item: {padding: 10,fontSize: 18,height: 44,},
});const FlatListBasics = () => {return (<View style={styles.container}><FlatListdata={[{key: 'Devin'},{key: 'Dan'},{key: 'Dominic'},{key: 'Jackson'},{key: 'James'},{key: 'Joel'},{key: 'John'},{key: 'Jillian'},{key: 'Jimmy'},{key: 'Julie'},]}renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}/></View>);
}SectionList使用：export default FlatListBasics;
import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';const styles = StyleSheet.create({container: {flex: 1,paddingTop: 22},sectionHeader: {paddingTop: 2,paddingLeft: 10,paddingRight: 10,paddingBottom: 2,fontSize: 14,fontWeight: 'bold',backgroundColor: 'rgba(247,247,247,1.0)',},item: {padding: 10,fontSize: 18,height: 44,},
})const SectionListBasics = () => {return (<View style={styles.container}><SectionListsections={[{title: 'D', data: ['Devin', 'Dan', 'Dominic']},{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},]}renderItem={({item}) => <Text style={styles.item}>{item}</Text>}renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}keyExtractor={(item, index) => index}/></View>);
}export default SectionListBasics;