Alert
O Alert
é uma API em React Native usada para exibir alertas simples para o usuário. Eles são úteis para mostrar mensagens importantes, solicitar confirmações ou fornecer feedback ao usuário. Aqui está um exemplo básico de como usar o Alert
em React Native:
import React from 'react';
import { View, Button, Alert, StyleSheet } from 'react-native';
const MeuComponente = () => {
const mostrarAlerta = () => {
Alert.alert(
'Título do Alerta',
'Mensagem do Alerta',
[
{
text: 'Cancelar',
onPress: () => console.log('Cancelar Pressionado'),
style: 'cancel',
},
{
text: 'OK',
onPress: () => console.log('OK Pressionado'),
},
],
{ cancelable: false }
);
};
return (
<View style={styles.container}>
<Button title="Mostrar Alerta" onPress={mostrarAlerta} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default MeuComponente;
Neste exemplo, Alert.alert
é usado para exibir um alerta com um título, uma mensagem e dois botões: “Cancelar” e “OK”. As funções de retorno de chamada são definidas para lidar com ações quando os botões são pressionados. O cancelable: false
impede que o alerta seja fechado pressionando fora dele.
Props Importantes do Alert:
title
: Título do alerta (string).message
: Mensagem do alerta (string).buttons
: Um array de objetos de botão com propriedadestext
,onPress
e opcionalmentestyle
(por exemplo,'cancel'
para o botão de cancelamento).cancelable
: Se verdadeiro, o alerta pode ser fechado pressionando fora dele (padrão é verdadeiro).
O Alert
é uma maneira fácil de interagir com os usuários em situações simples, como confirmações e mensagens informativas. Para interações mais complexas, como formulários de entrada, você pode considerar o uso de bibliotecas de modais personalizadas ou criar seus próprios componentes de modais personalizados em React Native.