Parte 1
Parte 2
Parte 3
Parte 4
Primeiro passo: montar a estrutura de pastas do nosso projeto.
|
1 |
<span role="presentation">src</span> |
|
1 2 3 4 5 6 7 |
src --components ----CurrentPrice ----HistoryGraphic ----QuotationsList ------QuotationsItem --images |
Dentro de cada pasta vamos criar o index.js e o style.css.
Vamos começar construindo o nosso app.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React, from "react"; import { StyleSheet, SafeAreaView, StatusBar } from "react-native"; return ( <SafeAreaView style={styles.container}> <StatusBar backgroundColor="#f50d41" barStyle="dark-content" /> <CurrentPrice /> <HistoryGraphic /> <QuotationsList /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#000000", alignItems: "center", paddingTop: Platform.OS === "android" ? 40 : 0, }, }); |
Montando nosso CurrentPrice.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from "react"; import { View, Text } from "react-native"; import styles from "./style"; export default function CurrentPrice() { return ( <View style={styles.headerPrice}> <Text style={styles.currentPrice}>$ 54343.355</Text> <Text style={styles.textPrice}>ultima cotação</Text> </View> ); } |
Style.js do CurrentPrice.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { StyleSheet } from 'react-native' const styles = StyleSheet.create({ headerPrice: { width:"100%", height:"auto", alignItems:"center", marginBottom:20, }, currentPrice:{ color:"#f50d41", fontSize:32, fontWeight:"bold", paddingTop:20, }, textPrice:{ color:"#ffffff", fontSize:16, fontWeight:"bold", } }); export default styles |
HistoryGraphic.
|
1 2 3 4 5 6 7 8 9 |
import React from "react"; import { View, } from "react-native"; export default function HistoryGraphic(props) { return ( <View style={{width:"100%", height:220, backgroundColor: "#232323"}}> </View> ); } |
QuotationsList.
|
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 |
import React, { Fragment } from "react" import { ScrollView, View, Text, TouchableOpacity } from "react-native" import styles from "./style" export default function QuotationsList(){ return( <Fragment> <View style={styles.filters}> <TouchableOpacity style={styles.buttonQuery} onPress={()=> {}} > <Text style={styles.textButtonQuery}>7D</Text> </TouchableOpacity> <TouchableOpacity style={styles.buttonQuery} onPress={()=> {}} > <Text style={styles.textButtonQuery}>15D</Text> </TouchableOpacity> <TouchableOpacity style={styles.buttonQuery} onPress={()=> {}} > <Text style={styles.textButtonQuery}>1M</Text> </TouchableOpacity> <TouchableOpacity style={styles.buttonQuery} onPress={()=> {}} > <Text style={styles.textButtonQuery}>3M</Text> </TouchableOpacity> <TouchableOpacity style={styles.buttonQuery} onPress={()=> {}} > <Text style={styles.textButtonQuery}>6M</Text> </TouchableOpacity> </View> </Fragment> ) } |
Styles.js QuotationsList.
|
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 |
import { StyleSheet } from 'react-native' const styles = StyleSheet.create({ filters: { width: "100%", flexDirection:"row", paddingVertical: 15, justifyContent:"space-evenly" }, buttonQuery:{ width:50, height:30, backgroundColor:"#f50d41", borderRadius:50, alignItems:"center", justifyContent:"center" }, textButtonQuery:{ color:"#ffffff", fontWeight:"bold", fontSize:14, } }); export default styles |
QuotationsItem.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React from 'react' import { View, Text, Image } from "react-native" import styles from './style' export default function QuotationItems(){ return( <View style={styles.mainContent}> <View style={styles.contextLeft}> <View style={styles.boxLogo}> <Image style={styles.logBitcoin} source={require("../../../img/bitcoinredpng.png")} /> <Text style={styles.dayCotation}>07/05/2021</Text> </View> </View> <View style={styles.contextRigth}> <Text style={styles.price}>$ 53331.052</Text> </View> </View> ) } |
Style.js QuotationsItem.
|
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 |
import { StyleSheet } from 'react-native' const styles = StyleSheet.create({ mainContent: { width:"95%", height:"auto", backgroundColor:"#000000", marginLeft:"3%", marginBottom: 15, borderRadius: 10, flexDirection:"row", alignItems:"center", padding:10 }, contextLeft:{ width:"36%", alignItems:"flex-start", }, boxLogo:{ flexDirection:"row", alignItems:"center" }, logBitcoin:{ width:40, height:40, marginLeft:2, }, dayCotation:{ fontSize:16, paddingLeft:2, color:"#ffffff", fontWeight:"bold", }, contextRigth:{ width:"60%", alignItems:"flex-end", }, price:{ color:"#ffffff", fontSize:18, fontWeight:"bold" } }); export default styles |
bom