Parte 1
Parte 2
Parte 3
Refatorando
Form index.js – adicionar if e else na função validationImc()
|
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); }else{ verificationImc(); setImc(null); setTextButton("Calcular"); setMessageImc("preencha o peso e altura"); } } |
Form index.js – no return do nosso componente vamos implementar a lógica que esta lá no result IMC.
Vamos inverter nosso Pressable com style form, com o view de style formContextpara para trocar somente o content onde ficam nossos inputs e manter os estilos que envolvem todo nosso form
|
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 |
<View style={styles.formContext}> {imc == null ? ( <Pressable onPress={Keyboard.dismiss} style={styles.form}> <Fragment> <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> </Fragment> </Pressable> {/*abaixo quando imc for diferente de null exibe o resultado*/} ) : ( {/*vamos criar uma view para poder envolver nosso Result e estilizar a View*/} <View style={styles.exhibitionResultImc}> <ResultImc messageResultIMc={messageImc} resultImc={imc} /> <TouchableOpacity style={styles.buttonCalculator} onPress={() => { validationImc(); }} > <Text style={styles.textButtonCalculator}>{textButton}</Text> </TouchableOpacity> </View> )} |
Vamos adicionar no style.js dentro de Form o seguinte estilo:
|
1 2 3 4 |
exhibitionResultImc:{ width:"100%", height:"50%", }, |
Em ResultImc, no index.js vamos remover a validação do imc e trazer o Text de messageResult e result Imc acima da View com style boxSharebutton:
|
1 2 3 4 5 6 7 8 9 |
<View style={styles.contextImc}> <Text style={styles.titleResultImc}>{props.messageResultIMc}</Text> <Text style={styles.resultImc}>{props.resultImc}</Text> <View style={styles.boxSharebutton}> <TouchableOpacity onPress={onShare} style={styles.shared}> <Text style={styles.sharedText}>Compartilhar</Text> </TouchableOpacity> </View> </View> |
Implementando o FlatList
Para começar devemos importar o flatList do React Native:
|
1 |
import { FlatList } from "react-native" |
Vamos criar uma const que irá receber o valor do imc calculado e guardaremos em um array de imcs:
|
1 |
const [imcList, setImcList] = useState([]); |
Na Função imcCalculator vamos fazer alguns ajustes.
Vamos fazer as alterações abaixo no totalImc, ele irá armazenar o valor final do imc.
Depois, vamos setar o state no array de imc o resultado de imc, passando um id único, e usaremos newDate().getTime() que retorna os milissegundos desde 1970.
Por fim, vamos fazer o setimc, confome a função abaixo:
|
1 2 3 4 5 |
function imcCalculator() { let totalImc = (weight / (heightFormat * heightFormat)).toFixed(2); setImcList((arr) => [...arr, { id: new Date().getTime(), imc: totalImc }]); setImc(totalImc); } |
Vamos criar nosso FlatList e usaremos nosso array como data dentro do nosso Flatlist:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<FlatList //abaixo adicionamos o style style={styles.listImcs} //em data vamos passar nosso array do state com.reverse() //para exibir o ultimo //resultado calculado primeiro data={imcList.reverse()} //Aqui nosso iremos imprimir na tela do app o componente dentro de renderItem, que será um loop em todos os item do nosso array. Por padrão o flatList so carrega os itens que estao na sendo exibidos tela melhorando assim quando a questão são grabdes bu. renderItem={({ item }) => { return ( <Text style={styles.resultImcItem}> <Text style={styles.textResultItemList}>Resultado IMC =</Text> {item.imc} </Text> ); }} //KeyExtractor e uma chave unica que o reactNative pede para cada //volta no loop u //um identificador unico para cada item keyExtractor={(item) => { item.id; }} /> |
Agora para concluir nosso FlatList vamos criar o estilo da nossa list. Dentro de style.js do Form vamos adicionar os seguintes estilos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
listImcs:{ marginTop: 20, }, resultImcItem:{ fontSize:28, color:"red", height:50, width:"100%", paddingRight:20 }, textResultItemList:{ color:"red", fontSize:16, } |
E uma dica muito útil para nosso FlatList, que é a opção de desativar barra lateral de scroll que por padrão e true(Ativa).
Podemos fazer isso passando o comando abaixo no FlatLIst:
|
1 2 3 |
<FlatList showsVerticalScrollIndicator={false} ... |
Após a refatoração e implementação do nosso FlatList, terminamos as features desta aula.
Aprendemos como e quando utilizar listas no React Native, dicas interessantes do componente e temos agora em nosso App o FlatList Implementado.
Curtiu a Aula? Deixe nos comentários, compartilhe com um(a) amigo(a), e se você ficou com alguma dúvida, acessa o grupo de React Native do Onebitcode, estamos aqui para dar o suporte necessário!
Espero você na próxima aula!
Qual link do repositorio do projeto?