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;
(100分))
