Buscar

Calculadora IMC em React Native

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

calculadoraimc/App.js
import React from 'react';
import { StyleSheet, Text, TextInput, View, Button, Alert } from 'react-native';
export default class App extends React.Component {
 constructor(props){
 super(props)
 this.state = {altura: 0,
 massa: 0,
 resultado: 0,
 resultTexto: "Aguardando valores..."}
 this.calcular = this.calcular.bind(this)
 }
 calcular(){
 this.state.resultado = this.state.massa / (this.state.altura * this.state.altura)
 if(this.state.massa < 10 || this.state.massa > 200){
 console.log(this.state.massa)
 Alert.alert('Erro!', 'Verifique valor do peso.')
 this.state.resultTexto = 'Verifique valor do peso.'
 this.state.resultado = 0
 }
 else if(this.state.altura < 1 || this.altura > 3){
 Alert.alert('Erro!', 'Verifique valor da altura.')
 this.state.resultTexto = 'Verifique valor da altura.'
 this.state.resultado = 0
 }
 else if (isNaN(this.state.altura)){
 Alert.alert('Erro!', 'Altura deve ser separada por \'.\' \nEx: 1.56')
 this.state.resultTexto = 'Verifique valor da altura.'
 this.state.resultado = 0
 }
 else if(this.state.resultado < 16){
 this.state.resultTexto = 'Muito abaixo do peso!'
 }
 else if (this.state.resultado < 17){
 this.state.resultTexto = 'Moderadamente abaixo do peso!'
 }
 else if (this.state.resultado < 18.5){
 this.state.resultTexto = 'Abaixo do peso!'
 }
 else if (this.state.resultado < 25) {
 this.state.resultTexto = 'Saudável!'
 }
 else if (this.state.resultado < 30) {
 this.state.resultTexto = 'Sobrepeso!'
 }
 else if (this.state.resultado < 35) {
 this.state.resultTexto = 'Obesidade Grau 1°!'
 }
 else if (this.state.resultado < 40) {
 this.state.resultTexto = 'Obesidade Grau 2°!'
 }
 else{
 this.setState.resultTexto = 'Obesidade Grau 3°'
 }
 this.setState(this.state)
 }
 render() {
 return (
 <View style={styles.container}>
 <View style={styles.entrada}>
 <TextInput autoCapitalize="none"
 placeholder="Insira sua massa:"
 keyboardType="numeric"
 style={styles.input}
 onChangeText={(massa)=>{this.setState({massa})}}/>
 
 <TextInput autoCapitalize="none"
 placeholder="Insira sua altura:"
 keyboardType="numeric"
 style={styles.input}
 onChangeText={(altura)=>{this.setState({altura})}}/>
 </View>
 <Button
 onPress={this.calcular}
 title="Calcular"
 color="#007BFF"
 />
 <Text style={styles.resultado}>
 {this.state.resultado.toFixed(2)}
 </Text>
 <Text style={styles.resultado}>
 {this.state.resultTexto}
 </Text>
 </View>
 );
 }
}
const styles = StyleSheet.create({
 container: {
 flex: 1,
 backgroundColor: '#fff',
 justifyContent: 'center'
 },
 entrada:{
 flexDirection: 'column',
 justifyContent: 'center',
 alignItems: 'center'
 },
 input:{
 height: 50,
 textAlign: "center",
 width: "100%",
 fontSize: 25,
 marginTop: 10,
 },
 resultado:{
 alignSelf:"center",
 color:"black",
 fontSize: 20,
 fontWeight:'bold',
 padding: 0,
 },
});
calculadoraimc/components/AssetExample.js
import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
export default class AssetExample extends React.Component {
 render() {
 return (
 <View style={styles.container}>
 <Text style={styles.paragraph}>
 Local files and assets can be imported by dragging and dropping them into the editor
 </Text>
 <Image style={styles.logo} source={require("../assets/expo.symbol.white.png")}/>
 </View>
 );
 }
}
const styles = StyleSheet.create({
 container: {
 alignItems: 'center',
 justifyContent: 'center',
 },
 paragraph: {
 margin: 24,
 marginTop: 0,
 fontSize: 14,
 fontWeight: 'bold',
 textAlign: 'center',
 color: '#34495e',
 },
 logo: {
 backgroundColor: "#056ecf",
 height: 128,
 width: 128,
 }
});
calculadoraimc/assets/expo.symbol.white.png
calculadoraimc/assets/icons/app-icon.png
calculadoraimc/assets/icons/loading-icon.png
calculadoraimc/package.json
{
 "name": "calculadoraimc",
 "version": "0.0.0",
 "description": "No description",
 "author": null,
 "private": true,
 "main": "node_modules/expo/AppEntry.js",
 "dependencies": {
 "expo": "^29.0.0",
 "react": "16.3.1",
 "react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
 "react-native-elements": "0.19.1",
 "react-native-fontawesome": "latest"
 }
}
calculadoraimc/app.json
{
 "expo": {
 "name": "calculadoraimc",
 "description": "No description",
 "slug": "snack-r1BXit9HQ",
 "privacy": "unlisted",
 "sdkVersion": "29.0.0",
 "version": "1.0.0",
 "orientation": "portrait",
 "primaryColor": "#cccccc",
 "icon": "https://d1wp6m56sqw74a.cloudfront.net/~assets/c9aa1be8a6a6fe81e20c3ac4106a2ebc",
 "loading": {
 "icon": "https://d1wp6m56sqw74a.cloudfront.net/~assets/c9aa1be8a6a6fe81e20c3ac4106a2ebc",
 "hideExponentText": false
 },
 "packagerOpts": {
 "assetExts": [
 "ttf",
 "mp4",
 "otf",
 "xml"
 ]
 },
 "ios": {
 "supportsTablet": true
 }
 }
}

Teste o Premium para desbloquear

Aproveite todos os benefícios por 3 dias sem pagar! 😉
Já tem cadastro?

Continue navegando