用户主要通过触摸与移动应用进行交互。他们可以使用手势组合，例如点击按钮，滚动列表或缩放地图。 React Native提供组件来处理各种常见的手势，以及一个全面的手势响应系统，以允许更高级的手势识别，但是你最可能感兴趣的一个组件是基本的Button。
显示按钮
按钮提供了一个基本的按钮组件，可以在所有平台上很好地渲染。显示按钮的最小示例如下所示
<Button
onPress={() => {
Alert.alert('You tapped the button!');
}}
title="Press Me"
/>
这将在iOS上呈现蓝色标签，在Android上呈现蓝色圆角矩形，并显示白色文字。按下按钮将调用“onPress”功能，在这种情况下显示一个警报弹出窗口。如果你喜欢，你可以指定一个“颜色”道具来改变你的按钮的颜色。
import React, { Component } from 'react';
import { Alert, Button, StyleSheet, View } from 'react-native';
export default class ButtonBasics extends Component {
_onPressButton() {
Alert.alert('You tapped the button!');
}
render() {
return (
<View style={ styles.container } >
<View style={ styles.buttonContainer } >
<Button
onPress={this._onPressButton}
title='Press Me'
/>
</View>
<View style={ styles.buttonContainer } >
<Button
onPress={this._onPressButton}
title='Press Me'
color='#841584'
/>
</View>
<View style={ styles.alternativeLayoutButtonContainer } >
<Button
onPress={this._onPressButton}
title='This loos great!'
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20,
},
alternativeLayoutButtonContainer: {
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
}
});
image.png
可点击
如果基本按钮看起来不适合您的应用程序，则可以使用React Native提供的任何“可触摸”组件构建您自己的按钮。 “可触摸”组件提供了捕捉敲击手势的能力，并且可以在识别手势时显示反馈。但是，这些组件不提供任何默认样式，因此您需要做一些工作才能让它们在您的应用中很好地显示。
您使用哪个“可触摸”组件取决于您想要提供的反馈类型：
- 通常，您可以使用TouchableHighlight在任何地方使用网页上的按钮或链接。当用户按下按钮时，视图的背景会变暗。
- 您可以考虑在Android上使用TouchableNativeFeedback来显示响应用户触摸的墨水表面反应波纹。
- TouchableOpacity可用于通过减少按钮的不透明度来提供反馈，从而在用户按下时可以看到背景。
- 如果您需要处理轻按手势，但不想显示任何反馈，请使用TouchableWithoutFeedback。
在某些情况下，您可能需要检测用户何时按下并保持一定的时间。这些长按可以通过将功能传递给任何“可触摸”组件的onLongPress支柱来处理。
import React, { Component } from 'react';
import { Alert, Platform, StyleSheet, Text, TouchableHightlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View, TouchableHighlight } 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>
<TouchableNativeFeedback
onPress={this._onPressButton}
background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableNativeFeedback</Text>
</View>
</TouchableNativeFeedback>
<TouchableWithoutFeedback
onPress={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: {
padding: 20,
color: 'white'
}
});
image.png
