Parte 1
Parte 2
Parte 3
No React Native podemos usar funcionalidades nativas tanto no android como no IOS, através das Apis do RN. Podemos ver todas as APIs disponíveis na documentação. Tudo isso via javascript de uma forma bem simples conforme veremos no nosso app.
Vamos iniciar esta aula com um aviso ao usuário de que o campo é obrigatório, e depois vibrar quando ele persistir no erro.
1 – Implementando state ErroMessenger
|
1 |
const [errorMessenger, setErroMessenger] = useState(null); |
2 – Criar um função que verifica erro ao calcular IMC
|
1 2 3 4 5 |
function verificationImc(){ if(imc == null){ setErrorMessage("campo obrigatório*") } } |
3 – Um vez que a gente calcular o imc e tudo correr como o esperado, devemos setar erroMessenger(null). Vamos fazer isso dentro de validatorImc().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function validationImc() { if (weight != null && height != null) { imcCalculator() setHeight(null) setWeight(null) setMessageImc("Seu imc é igual:") setTextButton("Calcular Novamente") setErrorMessage(null) return } verificationImc() setImc(null) setTextButton("Calcular") setMessageImc("preencha o peso e altura") } |
4 – E então vamos então estilizar:
|
1 2 3 4 5 6 |
errorMessage:{ fontSize:12, color:"red", fontWeight:"bold", paddingLeft:20, } |
5 – Vamos então exibir o errormessenger. Para isso basta adicionar abaixo de Altura e peso os campos abaixo
|
1 2 3 |
Ex: <Text style={styles.formLabel}>Peso</Text> <Text style={styles.errorMessage}>{errorMessage}</Text> |
Vibration – Interagindo com o usuário
Agora vejam que legal como a API do React Native facilita muito para que consigamos interagir com o usuário. Quando algo estiver incompleto vamos vibrar para que o usuário possa dar uma atenção e perceber que algo não esta como deveria.
1 – Vamos importar o Vibration do react-native no topo do nosso código
|
1 2 3 4 5 6 7 8 9 |
import { Share, Text, Vibration,// ja esta disponivel para alertar o usuario, precisamo implementar TextInput, View, TouchableOpacity, StyleSheet, } from "react-native"; |
2 – Para implementar, olha que fácil ficou de usarmos a vibração para alertar o usuário. Vamos aproveitar nossa validação que fizemos anteriormente e agora além de adicionar uma mensagem, o aparelho irá vibrar conforme o bloco abaixo:
|
1 2 3 4 5 6 |
function verificationImc(){ if(imc == null){ Vibration.vibrate(); setErrorMessage("campo obrigatório*") } } |
Share – Compartilhando seu imc
Para implementar o botão Compartilhar vamos fazer algumas alterações no nosso app.
A primeira delas é separar os resultados do form, assim tendo eles independente vamos melhorar a forma de trabalhar a lógica do nosso app.
1 – Então vamos levar a lógica de compartilhar para o resultImc já que só poderá ser compartilhado quando calcular imc.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//devemos importarentao TouchableOpacity, Share para comecarmos import { Text, View, TouchableOpacity, Share } from "react-native"; //apos isso iremos implementar funcao que retorna o bottao de compartilhar com a menssagem export default function ResultImc(props) { const onShare = async () => { const result = await Share.share({ message:"Meu imc hoje é: " +props.resultImc, }) } ... |
2 – Agora podemos montar nosso componente dentro de result IMC
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
return ( <View style={styles.contextImc}> <View style={styles.boxSharebutton}> {props.resultImc != null ? <TouchableOpacity onPress={onShare} style={styles.shared} > <Text style={styles.sharedText}>Share</Text> </TouchableOpacity> : <View/> } </View> <Text style={styles.titleResultImc}>{props.messageResultIMc}</Text> <Text style={styles.resultImc}>{props.resultImc}</Text> </View> ); } |
3 – e atualizar nosso estilo do resultImc:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import { StyleSheet } from 'react-native' const styles = StyleSheet.create({ contextImc: { flex:1, marginTop:20, paddingTop:15, alignItems:"center", width:"100%", }, resultImc:{ fontSize:48, color:"#ff0043", fontWeight:"bold", }, titleResultImc:{ fontSize:18, color:"#ff0043", fontWeight:"bold", }, boxSharebutton:{ width:"100%", alignItems:"center", marginBottom:10, }, shared:{ backgroundColor:"#1877f2", borderRadius:50, paddingBottom: 5, paddingTop:5, }, sharedText:{ color:"#ffffff", fontWeight:"bold", paddingHorizontal: 30, }, }); export default styles |
4 – Melhorando a experiência do Form trabalhando com Teclad, vamos utilizar o Passable que permite que uma área se torne clicável
|
1 2 3 4 5 6 7 8 9 |
import { Text, TextInput, TouchableOpacity, View, Vibration, Pressable,{/*Adicionar Pressable*/} Keyboard,{/*Adicionar Keyboard*/} } from "react-native"; |
5 – Em nosso index.js do Form vamos fazer alguns ajustes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
return ( <Pressable onPress={Keyboard.dismiss} style={styles.formContext}> <View style={styles.form}> <Text style={styles.formLabel}>Altura</Text> <Text style={styles.errorMessage}>{errorMessage}</Text> <TextInput style={styles.input} onChangeText={setHeight} value={height} placeholder="Ex: 1.75" keyboardType="numeric" /> <Text style={styles.formLabel}>Peso</Text> <Text style={styles.errorMessage}>{errorMessage}</Text> <TextInput style={styles.input} onChangeText={setWeight} value={weight} placeholder="Ex: 86.300" keyboardType="numeric" /> <TouchableOpacity style={styles.buttonCalculator} onPress={() =>{validationImc()}} > <Text style={styles.textButtonCalculator}>{textButton}</Text> </TouchableOpacity> </View> <ResultImc messageResultIMc={messageImc} resultImc={imc} /> </Pressable> ); } |
6 – Melhorando o cálculo do IMC adicionando tratamento dentro de ImcCalculator():
|
1 2 3 4 |
function imcCalculator(){ let heightFormat = height.replace(",",".") return setImc((weight / (heightFormat * heightFormat)).toFixed(2)); } |
7 – Por fim, ajustar alguns styles do nosso Form em styles.js, o nosso código então ficará assim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import { StyleSheet } from 'react-native' const styles = StyleSheet.create({ formContext: { flex:1, backgroundColor:"#ffffff", borderTopLeftRadius:30, borderTopRightRadius:30, alignItems:"center", paddingTop:30 }, form:{ width:"100%", }, formLabel:{ color:"#000000", fontSize:18, paddingLeft:20, }, input:{ width:"90%", borderRadius:50, backgroundColor:"#f6f6f6", height:40, margin:12, paddingLeft:10, }, buttonCalculator:{ borderRadius:50, alignItems:"center", justifyContent:"center", width:"90%", backgroundColor:"#ff0043", paddingTop:14, paddingBottom:14, marginLeft:12, marginTop:30, }, textButtonCalculator:{ fontSize:20, color:"#ffffff", }, errorMessage:{ fontSize:12, color:"red", fontWeight:"bold", paddingLeft:20, } }); export default styles |
Nesta aula implementamos algumas APIs do React Native que interage com os sensores nativos do nosso app como “Vibration”, também aprendemos como compartilhar o resultado do nosso cálculo do imc utilizando o “Share”.
Trabalhamos com o “Pressable” que é novo no React Native e que permite que uma área ao ser clicada execute uma ação, o que nos ajudou a melhorar a experiência do usuário usando mais uma API do React Native, o “keyboard”.
