Os usuários interagem com aplicativos móveis principalmente por meio do toque (Handling Touches). Eles podem usar uma combinação de gestos, como tocar em um botão, rolar uma lista ou ampliar um mapa. O React Native fornece componentes para lidar com todos os tipos de gestos comuns, além de um sistema abrangente de resposta a gestos para permitir um reconhecimento de gestos mais avançado, mas o componente em que você provavelmente estará interessado é o botão básico.
Exibindo um botão básico
<Button
onPress={() => {
alert('You tapped the button!');
}}
title="Press Me"
/>
Isso renderizará um rótulo azul no iOS e um retângulo arredondado azul com texto em branco no Android. Pressionar o botão chama a função “onPress”, que neste caso exibe um pop-up de alerta. Se desejar, você pode especificar um suporte de “cor” para alterar a cor do seu botão.
Vá em frente e brinque com o Buttoncomponente usando o exemplo abaixo. Você pode selecionar em qual plataforma seu aplicativo será visualizado clicando na alternância no canto inferior direito e, em seguida, clique em “Tocar para reproduzir” para visualizar o aplicativo.
import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
export default class ButtonBasics extends Component {
_onPressButton() {
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'
}
});
Tocáveis
Se o botão básico não parecer adequado para o seu aplicativo, você poderá criar seu próprio botão usando qualquer um dos componentes “Tocáveis” fornecidos pelo React Native. Os componentes “Tocáveis” oferecem a capacidade de capturar gestos de toque e podem exibir feedback quando um gesto é reconhecido. No entanto, esses componentes não fornecem nenhum estilo padrão; portanto, você precisará trabalhar um pouco para que eles tenham uma aparência agradável em seu aplicativo.
Qual componente “tocável” que você usa dependerá do tipo de feedback que você deseja fornecer:
- Geralmente, você pode usar o TouchableHighlight em qualquer lugar em que usaria um botão ou link na web. O fundo da vista será escurecido quando o usuário pressionar o botão.
- Você pode usar o TouchableNativeFeedback no Android para exibir ondulações na reação da superfície da tinta que respondem ao toque do usuário.
- O TouchableOpacity pode ser usado para fornecer feedback, reduzindo a opacidade do botão, permitindo que o plano de fundo seja visto enquanto o usuário está pressionando.
- Se você precisar manipular um gesto de toque, mas não desejar que nenhum feedback seja exibido, use TouchableWithoutFeedback .
Em alguns casos, convém detectar quando um usuário pressiona e mantém uma exibição por um determinado período de tempo. Essas prensas longas podem ser manipuladas passando uma função aos onLongPressacessórios de qualquer um dos componentes “Tocáveis”.
Vamos ver tudo isso em ação:
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';
export default class Touchables extends Component {
_onPressButton() {
alert('You tapped the button!')
}
_onLongPressButton() {
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 {Platform.OS !== 'android' ? '(Android only)' : ''}</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: {
textAlign: 'center',
padding: 20,
color: 'white'
}
});
Fim!
Top comments (0)