SHARE
TWEET

Untitled

a guest Aug 23rd, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
  3.  
  4. export default class ComponentePorcentagem extends React.Component {
  5.   state = {
  6.     counter: 0
  7.   };
  8.  
  9.   changeCounter = operation => {
  10.     let { counter } = this.state;
  11.     operation ? (counter += 1) : (counter -= 1);
  12.     this.setState({
  13.       counter
  14.     });
  15.   };
  16.  
  17.   render() {
  18.     const { counter } = this.state;
  19.     return (
  20.       <View style={styles.container}>
  21.         <Text style={styles.title}>Counter</Text>
  22.         <View style={styles.containerCounter}>
  23.           <Text style={styles.counter}>{counter}</Text>
  24.         </View>
  25.         <View style={styles.containerBtnRow}>
  26.           <TouchableOpacity onPress={() => this.changeCounter()}>
  27.             <View style={styles.containerBtn}>
  28.               <Text style={styles.textBtn}>Subtract</Text>
  29.             </View>
  30.           </TouchableOpacity>
  31.           <TouchableOpacity onPress={() => this.changeCounter(true)}>
  32.             <View style={styles.containerBtn}>
  33.               <Text style={styles.textBtn}>Add</Text>
  34.             </View>
  35.           </TouchableOpacity>
  36.         </View>
  37.       </View>
  38.     );
  39.   }
  40. }
  41.  
  42. const styles = StyleSheet.create({
  43.   container: {
  44.     height: "60%",
  45.     width: "80%",
  46.     margin: 20,
  47.     borderColor: "#ccc",
  48.     borderWidth: 1,
  49.     borderRadius: 10,
  50.     justifyContent: "center",
  51.     alignItems: "center"
  52.   },
  53.   containerCounter: {
  54.     justifyContent: "center",
  55.     alignItems: "center",
  56.     borderRadius: 10,
  57.     padding: 20,
  58.     width: 80,
  59.     backgroundColor: "red"
  60.   },
  61.   containerBtnRow: {
  62.     flexDirection: "row",
  63.     justifyContent: "space-around",
  64.     width: "100%",
  65.     padding: 10
  66.   },
  67.   containerBtn: {
  68.     justifyContent: "center",
  69.     alignItems: "center",
  70.     borderRadius: 20,
  71.     padding: 10,
  72.     backgroundColor: "blue",
  73.     width: 100
  74.   },
  75.   textBtn: {
  76.     fontSize: 18,
  77.     color: "white",
  78.     fontWeight: "700"
  79.   },
  80.   title: {
  81.     fontSize: 20,
  82.     fontWeight: "700",
  83.     marginBottom: 20
  84.   },
  85.   counter: {
  86.     fontSize: 20,
  87.     color: "white",
  88.     fontWeight: "700"
  89.   }
  90. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top