184 lines
6.9 KiB
Markdown
184 lines
6.9 KiB
Markdown
---
|
|
id: handling-touches
|
|
title: Handling Touches
|
|
layout: docs
|
|
category: The Basics
|
|
permalink: docs/handling-touches.html
|
|
next: using-a-scrollview
|
|
previous: handling-text-input
|
|
---
|
|
|
|
Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](docs/gesture-responder-system.html) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.
|
|
|
|
## Displaying a basic button
|
|
|
|
[Button](docs/button.html) provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:
|
|
|
|
```javascript
|
|
<Button
|
|
onPress={() => { Alert.alert('You tapped the button!')}}
|
|
title="Press Me"
|
|
/>
|
|
```
|
|
|
|
This will render a blue label on iOS, and a blue rounded rectangle with white text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.
|
|
|
|
|
|
|
|
Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.
|
|
|
|
```SnackPlayer?name=Button%20Basics
|
|
import React, { Component } from 'react';
|
|
import { Alert, AppRegistry, 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 looks great!"
|
|
/>
|
|
<Button
|
|
onPress={this._onPressButton}
|
|
title="OK!"
|
|
color="#841584"
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
},
|
|
buttonContainer: {
|
|
margin: 20
|
|
},
|
|
alternativeLayoutButtonContainer: {
|
|
margin: 20,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between'
|
|
}
|
|
})
|
|
|
|
// skip this line if using Create React Native App
|
|
AppRegistry.registerComponent('AwesomeProject', () => ButtonBasics);
|
|
```
|
|
|
|
|
|
## Touchables
|
|
|
|
If the basic button doesn't look right for your app, you can build your own button using any of the "Touchable" components provided by React Native. The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. These components do not provide any default styling, however, so you will need to do a bit of work to get them looking nicely in your app.
|
|
|
|
Which "Touchable" component you use will depend on what kind of feedback you want to provide:
|
|
|
|
- Generally, you can use [**TouchableHighlight**](docs/touchablehighlight.html) anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.
|
|
|
|
- You may consider using [**TouchableNativeFeedback**](docs/touchablenativefeedback.html) on Android to display ink surface reaction ripples that respond to the user's touch.
|
|
|
|
- [**TouchableOpacity**](docs/touchableopacity.html) can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.
|
|
|
|
- If you need to handle a tap gesture but you don't want any feedback to be displayed, use [**TouchableWithoutFeedback**](docs/touchablewithoutfeedback.html).
|
|
|
|
In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the `onLongPress` props of any of the "Touchable" components.
|
|
|
|
Let's see all of these in action:
|
|
|
|
```SnackPlayer?platform=android&name=Touchables
|
|
import React, { Component } from 'react';
|
|
import { Alert, AppRegistry, 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>
|
|
<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'
|
|
}
|
|
})
|
|
|
|
// skip this line if using Create React Native App
|
|
AppRegistry.registerComponent('AwesomeProject', () => Touchables);
|
|
```
|
|
|
|
## Scrolling lists, swiping pages, and pinch-to-zoom
|
|
|
|
Another gesture commonly used in mobile apps is the swipe or pan. This gesture allows the user to scroll through a list of items, or swipe through pages of content. In order to handle these and other gestures, we'll learn [how to use a ScrollView](docs/using-a-scrollview.html) next.
|