Advertisement
CarlosWGama

Aula 05 - State - F

Jan 25th, 2023 (edited)
920
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { useState } from 'react';
  2. import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
  3.  
  4. export default function App() {
  5.  
  6.   const [valor1, setValor1] = useState(0);
  7.   const [valor2, setValor2] = useState(0);
  8.   const [resultado, setResultado] = useState<null|number>(null);
  9.  
  10.   return (
  11.     <View style={styles.container}>
  12.       <View style={styles.linha}>
  13.         <Text style={styles.texto}>Valor 1: </Text>
  14.         <Text style={styles.texto}>Valor 2: </Text>
  15.       </View>
  16.  
  17.       <View style={styles.linha}>
  18.         <TextInput  placeholder="Digite o valor 1" keyboardType='decimal-pad' onChangeText={valor => setValor1(+valor)}/>
  19.         <TextInput  placeholder="Digite o valor 2" keyboardType='decimal-pad' onChangeText={valor => setValor2(+valor)}/>
  20.       </View>
  21.  
  22.       <Button title="Calcular" onPress={() => setResultado(valor1+valor2)} />
  23.  
  24.       { resultado && <View style={[styles.linha, {marginTop: 30}]}>
  25.         <Text style={styles.texto}>Resultado: </Text>
  26.         <Text style={styles.texto}>{resultado}</Text>
  27.       </View>}
  28.  
  29.     </View>
  30.   );
  31. }
  32.  
  33. const styles = StyleSheet.create({
  34.   container: {
  35.     padding: 50
  36.   },
  37.   texto: { fontSize: 16},
  38.   linha: {
  39.     flexDirection: 'row',
  40.     justifyContent: 'space-between'
  41.    
  42.   }
  43. });
  44.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement