O React Native é um framework de desenvolvimento de aplicativos móveis que permite criar aplicativos nativos para iOS e Android usando JavaScript. Neste artigo, vamos explorar como criar um aplicativo de alarme simples usando o React Native.
Antes de começar, certifique-se de ter o ambiente de desenvolvimento React Native configurado em seu sistema. Você pode seguir as instruções de instalação na documentação oficial do React Native.
Iniciando o projeto -
Para criar um novo projeto React Native usando o seguinte comando no terminal:
npx create-expo-app --template
A opção acima irá fornecer escolhas como aplicação por padrão Blank, Blank com Typescript e outros, selecione a padrão. Abrindo o projeto no VScode iremos instalar a biblioteca React Native DateTimePicker
, que usaremos para permitir que os usuários definam a hora do alarme. Execute o seguinte comando no terminal:
npm install @react-native-community/datetimepicker --save
Codificando a aplicação em React Native -
Abra o arquivo App.js e adicione o seguinte código para importar o DateTimePicker
e definir o estado inicial do aplicativo:
import React, {useState} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Platform,
} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
const App = () => {
const [date, setDate] = useState(new Date());
const [mode, setMode] = useState('time');
const [show, setShow] = useState(false);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
setShow(Platform.OS === 'ios');
setDate(currentDate);
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showTimepicker = () => {
showMode('time');
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={showTimepicker} style={styles.button}>
<Text style={styles.buttonText}>Definir alarme</Text>
</TouchableOpacity>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
backgroundColor: 'green',
padding: 10,
borderRadius: 5,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
});
export default App;
Neste código, estamos importando o DateTimePicker e usando o estado para rastrear a data e hora do alarme selecionado, o modo do seletor de data/hora e se o seletor deve ser exibido.
Também adicionamos um botão para permitir que os usuários definam a hora do alarme e um condicional para exibir o DateTimePicker quando o botão é pressionado.
Adicionando som na aplicação -
Adicione a biblioteca React Native Sound, que usaremos para tocar o som do alarme. Execute o seguinte comando no terminal:
npm install react-native-sound --save
Vamos adicionar o código a seguir para importar a biblioteca em nosso código:
import Sound from 'react-native-sound';
const App = () => {
// Código anterior omitido para maior clareza
const playAlarm = () => {
// Carrega o arquivo de som do alarme
const alarmSound = new Sound('alarm_sound.mp3', Sound.MAIN_BUNDLE, (error) => {
if (error) {
console.log('Erro ao carregar o som do alarme', error);
return;
}
// Reproduz o som do alarme
alarmSound.play((success) => {
if (success) {
console.log('O som do alarme foi reproduzido com sucesso');
} else {
console.log('Falha ao reproduzir o som do alarme');
}
// Libera os recursos do som do alarme
alarmSound.release();
});
});
};
const onChange = (event, selectedDate) => {
// Código anterior omitido para maior clareza
// Verifica se o alarme está configurado para um horário futuro
if (currentDate > new Date()) {
playAlarm();
}
};
};
Neste trecho de código, importamos a biblioteca React Native Sound e adicionamos a função playAlarm() que carrega e reproduz o som do alarme quando chamada.
Dentro da função onChange(), verificamos se o horário selecionado para o alarme é futuro em relação à hora atual. Se for, chamamos a função playAlarm() para reproduzir o som do alarme.
Certifique-se de ter um arquivo de som chamado alarm_sound.mp3 em seu projeto, localizado na pasta android/app/src/main/res/raw/. Você pode substituir esse arquivo pelo som do alarme de sua escolha.
Para executar a aplicação use os seguintes comandos variando de dispositivo:
npx expo start
Depois de construir o aplicativo, você verá um botão "Definir alarme". Ao tocar nesse botão, o seletor de tempo será exibido e você poderá selecionar um horário para o alarme. Se o horário selecionado for futuro, o som do alarme será reproduzido.
Espero que este artigo tenha lhe ajudado a criar um alarme pessoal. Este é um exemplo básico de um aplicativo de alarme usando React Native. Você pode personalizá-lo e adicionar mais recursos, como repetição de alarme, seleção de dias da semana, configurações de volume etc., de acordo com suas necessidades.
Top comments (0)