Projeto Integrado
annabalves / pi Goto Github PK
View Code? Open in Web Editor NEWProjeto Integrado
pi's Introduction
pi's People
Contributors
Watchers
Forkers
rodrigo-rogerpi's Issues
Tela de login
import React, {useState} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Pressable, Text, TextInput, View, CheckBox } from 'react-native';
import paybus from "./imagens/paybus.png";
export default function Entrar({navigation}) {
const [isSelected, setSelection] = useState(false);
return (
<View
style={{
flex: 1,
flexDirection: '',
justifyContent: 'space-between',
padding: 16,
backgroundColor:'#111828',
alignItems:'center',
}}>
<View style={{
alignSelf:'flex-start',
}}>
<Text
style={{
color: 'white',
fontSize: 36,
fontFamily:'arial',
flexDirection:'row',
padding: 16,
}}>
Log In
</Text>
</View>
<View></View>
<View>
<TextInput
style={{
height:37,
width:269,
borderWidth: 1,
borderColor: "white",
padding: 10,
marginBottom: 16,
borderRadius: 28,
color:'white'
}}
placeholder="Nome ou e-mail"
placeholderTextColor ='white'
/>
<TextInput
style={{ borderWidth: 1,
height:37,
width:269,
padding: 10,
borderColor: "white",
borderRadius: 28,
color:'white'
}}
placeholder="Senha" securyText={true}
placeholderTextColor ='white'
/>
<View style={{flex: 0.5,
alignItems: "center",
margin:10,
flexDirection: "row",
}}>
<CheckBox
value={isSelected}
onValueChange={setSelection}
/><Text style={{
color:'white',
paddingLeft:5
}}>Lembrar Senha</Text>
</View>
</View>
<View style={{ paddingTop: 16 }}>
<Pressable
style={({ pressed }) => [
{ backgroundColor: '#111828' },
{ alignItems: 'center',
padding: 8,
borderRadius: 28,
height:37,
width:267,
borderWidth:1,
borderColor:'white'},
]}
onPress={() => navigation.navigate('cartoes')}>
<Text style={{
color: 'white',
fontSize: 14
}}>ENTRAR</Text>
</Pressable>
</View>
<Pressable
onPress={() => navigation.navigate('codigoderec')}>
<Text style={{color:'white',}}>Esqueci a Senha</Text>
</Pressable>
<View></View>
</View>
);
}
Tela de extrato de uso
Tela dos cartões salvos
import React from 'react';
import { Pressable, Text, View,Image} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
export default function Cartoessalv({navigation}) {
return (
<View style={{
flex: 1,
padding: 16,
backgroundColor:'#0C6278',
alignItems:'row',
}}>
<View style={{
paddingTop:5,
}}>
<Pressable style={{
position:'relative',
start:5,
height:35,
width:35,
backgroundColor:'#13748D',
borderRadius:20,
justifyContent:'center',
alignItems:'center'}}
onPress={() => navigation.navigate ('menu')}>
<AntDesign name="user" size={20} color="white" />
</Pressable>
</View>
<View>
<View>
<Text style={{
paddingTop:15,
color:'white',
paddingLeft:40
}}>Debito</Text>
<View style={{
alignItems:"center"
}}>
<Pressable style={{
position:'relative',
height:153,
width:262,
top:10,
left:0,
backgroundColor:'#277C93',
borderRadius:30,
justifyContent:'center',
alignItems:'center'}}
onPress={() => navigation.navigate ('infcard')}>
<Image
style={{
width: 262,
height: 153,
borderRadius:25}}
source={require('./imagens/cartao.png')}
/>
</Pressable>
</View>
</View>
</View>
<View>
<View>
<Text style={{
paddingTop:15,
color:'white',
paddingLeft:40
}}>Mobilidade</Text>
<View style={{
alignItems:"center"
}}>
<Pressable style={{
position:'relative',
height:153,
width:262,
top:10,
left:0,
backgroundColor:'#277C93',
borderRadius:30,
justifyContent:'center',
alignItems:'center'}}
onPress={() => navigation.navigate ('infcard')}>
<Image
style={{
width: 262,
height: 153,
borderRadius:25}}
source={require('./imagens/cartao.png')}
/>
</Pressable>
</View>
</View>
</View>
<View>
<View>
<Text style={{
paddingTop:15,
color:'white',
paddingLeft:40
}}>Estudantil</Text>
<View style={{
alignItems:"center"
}}>
<Pressable style={{
position:'relative',
height:153,
width:262,
top:10,
backgroundColor:'#277C93',
borderRadius:30,
justifyContent:'center',
alignItems:'center'}}
onPress={() => navigation.navigate ('infestudantil')}>
<Image
style={{
width: 262,
height: 153,
borderRadius:25}}
source={require('./imagens/cartao.png')}
/>
</Pressable>
</View>
</View>
</View>
</View>
);
}
Tela de recarga de cartão
Criar uma tela onde será possível fazer recarga de cartão.
Tela de info dos cartões débito/mobilidade
import React from 'react';
import { Pressable, Text, TextInput, View, Image} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
export default function Infcard({navigation}) {
return (
<View
style={{
flex:1,
flexDirection: 'space-between',
backgroundColor:'white',
}}>
<View style={{
flex:9
}}>
<View style={{
height:140,
backgroundColor:'#0C6278',
justifyContent: 'flex-end',
alignItems:'center',}}>
<View>
<Pressable style={{
position:'absolute',
top:25,
right:110,
height:35,
width:35,
backgroundColor:'#13748D',
borderRadius:20,
justifyContent:'center',
alignItems:'center'}}
onPress={() => navigation.navigate ('menu')}>
<AntDesign name="user" size={20} color="white" />
</Pressable>
</View>
<View style={{
position:'relative',
height:153,
width:262,
top:70,
backgroundColor:'#111828',
borderRadius:10,
justifyContent:'center',
alignItems:'center'}}>
<View style={{
position:'absolute',
top:40,
left:15,
flexDirection:'row'
}}>
<Image style={{
width: 20,
height: 20,
}}
source={require('./imagens/chip.png')}/>
<Image style={{
width: 30,
height: 20,
}}
source={require('./imagens/sinal.png')}/>
</View>
<View style={{
position:'absolute',
top:85,
left:20
}}>
<Text style={{
color:'white',
fontSize:14
}}>2254 3548 6548 6458</Text>
</View>
<View style={{
top:56,
width:262,
height:40,
borderRadius:10,
backgroundColor:'#0C6278',
alignItems:'center',
justifyContent:'center'
}}>
<View style={{
flexDirection:'row',
}}>
<Text style={{
color:'white'
}}>R$ 0,00</Text>
<Pressable>
<View style={{
paddingLeft:150
}}>
<Image
style={{
width: 20,
height: 20,
}}
source={require('./imagens/mostrar.png')}
/>
</View>
</Pressable>
</View>
</View>
</View>
</View>
<View style={{
height:130,
width:10,
}}>
</View>
<View style={{
paddingLeft:15
}}>
<Text style={{
}}>ACESSO RÁPIDO</Text>
<View style={{
position:'absolute',
top:40,
flexDirection:'row'
}}>
<View>
<Pressable style={{
height:107,
width:90,
backgroundColor:'#0C6278',
borderRadius:10,
alignItems:'center',
}}
onPress={() => navigation.navigate ('recarga')}>
<Image
style={{
top:20,
width:26,
height:26,
}}
source={require('./imagens/recarga.png')}
/>
<Text style={{
paddingTop:25,
color:'white',
paddingLeft:10
}}>Recarga do cartão</Text>
</Pressable>
</View>
<View>
<Pressable style={{
height:107,
width:90,
left:17,
backgroundColor:'#0C6278',
borderRadius:10,
alignItems:'center',
}}
onPress={() => navigation.navigate ('extrato')}>
<Image
style={{
top:20,
width:26,
height:26,
}}
source={require('./imagens/extrato.png')}
/>
<Text style={{
paddingTop:25,
color:'white',
paddingLeft:10
}}>Extrato de uso</Text>
</Pressable>
</View>
<View>
<Pressable style={{
height:107,
width:90,
left:34,
backgroundColor:'#0C6278',
borderRadius:10,
alignItems:'center',
}}
onPress={() => navigation.navigate ('atendimento')}>
<Image
style={{
top:20,
width: 26,
height: 26,
}}
source={require('./imagens/atendimento.png')}
/>
<Text style={{
paddingTop:25,
color:'white',
paddingLeft:0,
}}>Atendimento</Text>
</Pressable>
</View>
</View>
</View>
<View style={{
width:10,
height:160,
}}></View>
<View>
<Pressable style={{
flexDirection:'row',
paddingLeft:20
}}>
<Image
style={{
width: 19,
height: 19,
}}
source={require('./imagens/editar.png')}
/> <Text style={{
paddingLeft:8,
}}>Editar</Text>
</Pressable>
</View>
<View>
<Pressable style={{
flexDirection:'row',
paddingLeft:20,
paddingTop:10
}} onPress={() => navigation.navigate ('cartoes',alert('Cartão removido com sucesso'))}>
<Image
style={{
width: 19,
height: 19,
}}
source={require('./imagens/remover.png')}
/> <Text style={{
color:'red',
paddingLeft:8,
}}>Remover cartão</Text>
</Pressable>
</View>
</View>
<View style={{
flex:1
}}>
<Pressable style={{
width:'100%',
height:60,
backgroundColor:'#0C6278',
borderRadius:10,
alignItems:'center',
justifyContent:'center',
}}
onPress={() => navigation.navigate ('cartoessalv')}>
<Image style={{
width: 23,
height: 23,
}}
source={require('./imagens/casa.png')} />
<Text style={{
color:'white'
}}>Início</Text>
</Pressable>
</View>
</View>
);
}
Tela de inicio
import React from 'react';
import { Text, View, Image, Pressable } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
export default function Splash({navigation}){
return (
<View style={{
flex: 1,
backgroundColor:'#111828',
}}>
<Pressable style={{
alignItems: 'center',
justifyContent: 'center',
width:'100%',
height:'100%'
}} onPress={() => navigation.navigate ('login')}>
<Text style={{
fontSize:24 }}><Image
style={{
width: 90,
height: 90,}}
source={require('./imagens/paybus.png')}
/>
<Text style={{
fontSize:48,
color:'white'
}}>PAY BUS
<View style={{
position:'absolute',
bottom:100
}}>
);
}
Tela de menu
import React from 'react';
import { Pressable, Text, TextInput, View, Image} from 'react-native';
export default function Menu({navigation}) {
return (
<View
style={{
flex:1,
flexDirection: 'space-between',
justifyContent: '',
backgroundColor:'white',
}}>
<View style={{
flex:12
}}>
<View style={{
height:140,
backgroundColor:'#0C6278',
justifyContent: 'flex-end',}}>
<View style={{
borderWidth:1,
borderColor:'white',
}}></View>
<Text style={{
fontSize: 20,
color: 'white',
fontFamily: "",
fontWeight: "",
marginLeft:8,
padding:8
}}>Menu Completo</Text>
</View>
<View style={{
paddingTop:20
}}>
<Pressable style={{
flexDirection:'row',
height:50,
justifyContent:'column',
}} onPress={() => navigation.navigate ('recargaacrap')}>
<View style={{
justifyContent:'center',
alignItems:'center',
paddingLeft:30
}}>
<View style={{
flexDirection:'row',
}}>
<Text style={{
}}> <Image
style={{width: 26,height: 26, }}
source={require('./imagens/recargablack.png')}/></Text>
<Text style={{
paddingLeft:15,
fontSize:18}}>Recarga de cartão</Text>
</View>
</View>
</Pressable>
</View>
<View style={{
paddingTop:1
}}>
<Pressable style={{
flexDirection:'row',
height:50,
justifyContent:'column',
}} onPress={() => navigation.navigate ('extratoacrap')}>
<View style={{
justifyContent:'center',
alignItems:'center',
paddingLeft:30
}}>
<View style={{
flexDirection:'row',
}}>
<Text style={{
}}> <Image
style={{width: 26,height: 26, }}
source={require('./imagens/extratoblack.png')}/></Text>
<Text style={{
paddingLeft:15,
fontSize:18}}>Extrato de uso</Text>
</View>
</View>
</Pressable>
</View>
<View style={{
paddingTop:1
}}>
<Pressable style={{
flexDirection:'row',
height:50,
justifyContent:'column',
}} onPress={() => navigation.navigate ('alterarsenha')}>
<View style={{
justifyContent:'center',
alignItems:'center',
paddingLeft:30
}}>
<View style={{
flexDirection:'row',
}}>
<Text style={{
}}> <Image
style={{width: 26,height: 26, }}
source={require('./imagens/cadeadoblack.png')}/></Text>
<Text style={{
paddingLeft:15,
fontSize:18}}>Alterar senha</Text>
</View>
</View>
</Pressable>
</View>
<View style={{
paddingTop:1
}}>
<Pressable style={{
flexDirection:'row',
height:50,
justifyContent:'column',
}} onPress={() => navigation.navigate ('termos')}>
<View style={{
justifyContent:'center',
alignItems:'center',
paddingLeft:30
}}>
<View style={{
flexDirection:'row',
}}>
<Text style={{
}}> <Image
style={{width: 26,height: 26, }}
source={require('./imagens/termos.png')}/></Text>
<Text style={{
paddingLeft:15,
fontSize:18}}>Termos de uso</Text>
</View>
</View>
</Pressable>
</View>
<View style={{
paddingTop:1
}}>
<Pressable style={{
flexDirection:'row',
height:50,
justifyContent:'column',
}} onPress={() => navigation.navigate ('atendimentoacrap')}>
<View style={{
justifyContent:'center',
alignItems:'center',
paddingLeft:30
}}>
<View style={{
flexDirection:'row',
}}>
<Text style={{
}}> <Image
style={{width: 26,height: 26, }}
source={require('./imagens/atendimentoblack.png')}/></Text>
<Text style={{
paddingLeft:15,
fontSize:18}}>Atendimento</Text>
</View>
</View>
</Pressable>
</View>
<View style={{
paddingTop:1
}}>
<Pressable style={{
flexDirection:'row',
height:50,
justifyContent:'column',
}} onPress={() => navigation.navigate ('login')}>
<View style={{
justifyContent:'center',
alignItems:'center',
paddingLeft:30
}}>
<View style={{
flexDirection:'row',
}}>
<Text style={{
}}> <Image
style={{width: 26,height: 26, }}
source={require('./imagens/sair.png')}/></Text>
<Text style={{
paddingLeft:15,
fontSize:18}}>Sair da conta</Text>
</View>
</View>
</Pressable>
</View>
</View>
<View style={{
flex:1
}}>
<Pressable style={{
width:'100%',
height:60,
backgroundColor:'#0C6278',
borderRadius:10,
alignItems:'center',
justifyContent:'center',
}}
onPress={() => navigation.navigate ('cartoessalv')}>
<Image style={{
width: 23,
height: 23,
}}
source={require('./imagens/casa.png')} />
<Text style={{
color:'white'
}}>Início</Text>
</Pressable>
</View>
</View>
);
}
Tela de atendimento
import React from 'react';
import { Text, View, Image, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
export default function Atendimento({navigation}){
return (
<View style={{
flex: 1,
backgroundColor:'#111828',
alignItems: 'center',
justifyContent: 'center',
width:'100%',
height:'100%'
}}>
<View style={{
paddingTop:5,
}}>
<Pressable style={{
position:'relative',
paddingLeft:10,
height:30,
bottom:60,
flexDirection:'row',
alignItems:'center',
}}
onPress={() => navigation.navigate ('menu')}>
<Ionicons name="ios-arrow-back-circle-outline" size={30} color="white" /><Text style={{
color:'white',
}}>Voltar</Text>
</Pressable>
</View>
<Text style={{
fontSize:24 }}><Image
style={{
width: 90,
height: 90,}}
source={require('./imagens/abaatende.png')}
/></Text>
<Text style={{
fontSize:20,
color:'white'
}}>Estamos em manutenção ops...</Text>
<Text style={{
paddingTop:20,
fontSize:20,
color:'white'
}}>Tente mais tarde!</Text>
</View>
);
}
Tela de menu
Criar uma tela de menu.
Tela de recarga de cartão
import React from 'react';
import { Pressable, Text, TextInput, View} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
export default function Recarga({navigation}) {
return (
<View
style={{
flex:1,
flexDirection: 'space-between',
justifyContent: '',
backgroundColor:'white',
}}>
<View style={{
flex:3
}}>
<View style={{
height:140,
backgroundColor:'#0C6278',
justifyContent: 'flex-end',}}>
<View style={{
paddingTop:5,
}}>
<Pressable style={{
position:'relative',
paddingLeft:10,
height:30,
bottom:60,
}}
onPress={() => navigation.navigate ('infcard')}>
<Ionicons name="ios-arrow-back-circle-outline" size={30} color="white" />
</Pressable>
</View>
<View style={{
borderWidth:1,
borderColor:'white',
}}></View>
<Text style={{
fontSize: 20,
color: 'white',
fontFamily: "",
fontWeight: "",
marginLeft:8,
padding:8
}}>Recarregar cartão</Text>
</View>
<View style={{
paddingLeft:20,
paddingTop:30
}}>
<Text style={{
fontSize:24
}}>Quanto você quer{'\n'}recarregar?</Text>
<Text style={{
paddingTop:10,
fontSize:12
}}>Mínimo de R$ 5,00 e máximo de R$ 1.000,00 {'\n'}Apenas valores inteiros são aceitos</Text>
</View>
<View style={{
paddingTop:40,
flexDirection:'row',
justifyContent:'space-around'
}}>
<Text style={{
fontSize:20
}}>R$<View style={{paddingLeft:210}}><TextInput placeholder='0,00' placeholderTextColor='black' style={{
width:50,
fontSize:20,
borderWidth:0
}}/></View></Text>
</View>
<View style={{
paddingTop:10,
}}>
<View style={{
borderWidth:1,
borderColor:'#E5E5E5'
}}></View>
</View>
</View>
<View style={{
flex:1,
width:'100%',
height:'30%',
backgroundColor:'white',
alignItems:'center',
}}>
<Pressable style={{
justifyContent:'center',
alignItems:'center',
height:37,
width:269,
borderRadius:24,
backgroundColor:'#0C6278'
}}
onPress={() => navigation.navigate ('infcard')}>
<Text style={{
paddingBottom:20,
color:'white',
paddingTop:18
}}>Continuar</Text>
</Pressable>
</View>
</View>
);
}
Tela de Login
Tela de cadastro de cartão
Criar uma tela onde será possível cadastrar cartões.
Tela de termos
import React from 'react';
import { Text, View, Image, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
export default function Atendimento({navigation}){
return (
<View style={{
flex: 1,
backgroundColor:'#111828',
alignItems: 'center',
justifyContent: 'center',
width:'100%',
height:'100%'
}}>
<View style={{
paddingTop:5,
}}>
<Pressable style={{
position:'relative',
paddingLeft:10,
height:30,
bottom:60,
flexDirection:'row',
alignItems:'center',
}}
onPress={() => navigation.navigate ('menu')}>
<Ionicons name="ios-arrow-back-circle-outline" size={30} color="white" /><Text style={{
color:'white',
}}>Voltar</Text>
</Pressable>
</View>
<Text style={{
fontSize:24 }}><Image
style={{
width: 90,
height: 90,}}
source={require('./imagens/termosas.png')}
/></Text>
<Text style={{
fontSize:20,
color:'white'
}}>Aconteceu algum erro ops...</Text>
<Text style={{
paddingTop:20,
fontSize:20,
color:'white'
}}>Tente mais tarde!</Text>
</View>
);
}
Tela de cartão de débito
import React from 'react';
import { Pressable, Text, TextInput, View} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
export default function Debito({navigation}) {
return (
<View
style={{
flex:1,
flexDirection: 'space-between',
justifyContent: 'center',
backgroundColor:'white',
}}>
<View style={{
flex:11,
}}>
<View style={{
height:140,
backgroundColor:'#0C6278',
justifyContent: 'flex-end',}}>
<View style={{
paddingTop:5,
}}>
<Pressable style={{
position:'relative',
paddingLeft:10,
height:30,
bottom:60,
}}
onPress={() => navigation.navigate ('cartoes')}>
<Ionicons name="ios-arrow-back-circle-outline" size={30} color="white" />
</Pressable>
</View>
<View style={{
borderWidth:1,
borderColor:'white',
}}></View>
<Text style={{
fontSize: 20,
color: 'white',
fontFamily: "",
fontWeight: "",
marginLeft:8,
padding:5
}}>Cadastrar Cartão</Text>
</View>
<View>
<View style={{
paddingLeft:20,
paddingTop:40,
}}>
<Text style={{
paddingLeft:10,}}>Nº do cartão</Text>
<TextInput style={{
borderWidth: 1,
height:37,
width:303,
padding: 10,
borderColor: "black",
borderRadius: 30
}}
/>
</View>
<View style={{
flexDirection:'row',
paddingTop:5,
paddingLeft:20
}}>
<View style={{
right:0
}}>
<Text style={{
paddingLeft:10,}}>Validade</Text>
<TextInput
style={{
height:35,
width:130,
borderWidth: 1,
borderColor: "black",
padding: 10,
marginBottom: 16,
borderRadius: 28,
}}
placeholder="MM/AA"
placeholderTextColor ='gray'
/>
</View>
<View style={{
paddingLeft:43
}}>
<Text style={{
paddingLeft:10,}}>CVV</Text>
<TextInput
style={{
height:35,
width:130,
borderWidth: 1,
borderColor: "black",
padding: 10,
marginBottom: 16,
borderRadius: 28,
}}
placeholder="Ex: 123"
placeholderTextColor ='gray'
/>
</View>
</View>
<View style={{
paddingLeft:20,
}}>
<Text style={{
paddingLeft:10,}}>Nome do titular</Text>
<TextInput style={{
borderWidth: 1,
height:37,
width:303,
padding: 10,
borderColor: "black",
borderRadius: 30
}}
/>
</View>
</View>
</View>
<View style={{
flex:1,
}}>
<Pressable style={{
alignItems:'center',
width:'100%',
height:50,
borderRadius:10,
backgroundColor:'#0C6278',
justifyContent:'center'
}}
onPress={() => navigation.navigate ('cartoessalv')}>
<Text style={{
color:'white',
}}>SALVAR</Text>
</Pressable>
</View>
</View>
);
}
Tela de cadastro de cartões
import React from 'react';
import { Pressable, Text, View} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
export default function Cartoes({navigation}) {
return (
<View style={{
flex: 2,
padding: 16,
backgroundColor:'#0C6278',
alignItems:'row',
justifyContent: 'center',
}}>
<View style={{
paddingTop:5,
}}>
<Pressable style={{
position:'relative',
start:5,
height:35,
width:35,
backgroundColor:'#13748D',
borderRadius:20,
justifyContent:'center',
alignItems:'center'}}
onPress={() => navigation.navigate ('perfil')}>
<AntDesign name="user" size={20} color="white" />
</Pressable>
</View>
<View>
<View>
<Text style={{
color:'white',
paddingLeft:40,
paddingTop:15
}}>Debito</Text>
<View style={{
alignItems:"center"
}}>
<Pressable style={{
position:'relative',
height:153,
width:262,
top:10,
left:0,
backgroundColor:'#277C93',
borderRadius:30,
justifyContent:'center',
alignItems:'center'}}
onPress={() => navigation.navigate ('credito')}>
<Ionicons name="add-circle-outline" size={46} color="white" />
</Pressable>
</View>
</View>
<View style={{
paddingTop:10
}}>
<Text style={{
color:'white',
paddingLeft:40,
paddingTop:15
}}>Mobilidade</Text>
<View style={{
alignItems:"center"
}}>
<Pressable style={{
position:'relative',
height:153,
width:262,
top:10,
left:0,
backgroundColor:'#277C93',
borderRadius:30,
justifyContent:'center',
alignItems:'center'}}
onPress={() => navigation.navigate ('mobilidade')}>
<Ionicons name="add-circle-outline" size={46} color="white" />
</Pressable>
</View>
</View>
<View style={{
paddingTop:10
}}>
<Text style={{
color:'white',
paddingLeft:40,
paddingTop:15
}}>Estudantil</Text>
<View style={{
alignItems:"center"
}}>
<Pressable style={{
position:'relative',
height:153,
width:262,
top:10,
left:0,
backgroundColor:'#277C93',
borderRadius:30,
justifyContent:'center',
alignItems:'center'}}
onPress={() => navigation.navigate ('estudantil')}>
<Ionicons name="add-circle-outline" size={46} color="white" />
</Pressable>
</View>
</View>
</View>
</View>
);
}
Criar tipografia
Tela de extrato de uso
import React from 'react';
import { Pressable, Text, TextInput, View} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
export default function Estudantil({navigation}) {
return (
<View style={{
flex:1,
flexDirection: 'space-between',
}}>
<View
style={{
flex:11,
backgroundColor:'white',
}}>
<View style={{
height:140,
backgroundColor:'#0C6278',
justifyContent: 'flex-end',}}>
<View style={{
paddingTop:5,
}}>
<Pressable style={{
position:'relative',
paddingLeft:10,
height:30,
bottom:60,
}}
onPress={() => navigation.navigate ('infcard')}>
<Ionicons name="ios-arrow-back-circle-outline" size={30} color="white" />
</Pressable>
</View>
<View style={{
borderWidth:1,
borderColor:'white',
}}></View>
<Text style={{
fontSize: 20,
color: 'white',
fontFamily: "",
fontWeight: "",
marginLeft:8,
padding:8
}}>Extrato de uso</Text>
</View>
<View style={{
flexDirection:'row',
paddingLeft:18,
paddingTop:10,
alignItems:'center'
}}>
<Text style={{
fontSize:13
}}>XX/XX/XXXX{'\n'}“onibus que pegou”</Text>
<Text style={{
fontSize:13,
paddingLeft:140
}}>R$ 0,00</Text>
</View>
<View style={{
paddingTop:10,
}}>
<View style={{
paddingTop:0,
borderWidth:1,
borderColor:'#E5E5E5'
}}></View>
</View>
<View style={{
flexDirection:'row',
paddingLeft:18,
paddingTop:10,
alignItems:'center'
}}>
<Text style={{
fontSize:13
}}>XX/XX/XXXX{'\n'}“onibus que pegou”</Text>
<Text style={{
fontSize:13,
paddingLeft:140
}}>R$ 0,00</Text>
</View>
<View style={{
paddingTop:10,
}}>
<View style={{
paddingTop:0,
borderWidth:1,
borderColor:'#E5E5E5'
}}></View>
</View>
<View style={{
flexDirection:'row',
paddingLeft:18,
paddingTop:10,
alignItems:'center'
}}>
<Text style={{
fontSize:13
}}>XX/XX/XXXX{'\n'}“onibus que pegou”</Text>
<Text style={{
fontSize:13,
paddingLeft:140
}}>R$ 0,00</Text>
</View>
<View style={{
paddingTop:10,
}}>
<View style={{
paddingTop:0,
borderWidth:1,
borderColor:'#E5E5E5'
}}></View>
</View>
<View style={{
flexDirection:'row',
paddingLeft:18,
paddingTop:10,
alignItems:'center'
}}>
<Text style={{
fontSize:13
}}>XX/XX/XXXX{'\n'}“onibus que pegou”</Text>
<Text style={{
fontSize:13,
paddingLeft:140
}}>R$ 0,00</Text>
</View>
<View style={{
paddingTop:10,
}}>
<View style={{
paddingTop:0,
borderWidth:1,
borderColor:'#E5E5E5'
}}></View>
</View>
<View style={{
flexDirection:'row',
paddingLeft:18,
paddingTop:10,
alignItems:'center'
}}>
<Text style={{
fontSize:13
}}>XX/XX/XXXX{'\n'}“onibus que pegou”</Text>
<Text style={{
fontSize:13,
paddingLeft:140
}}>R$ 0,00</Text>
</View>
<View style={{
paddingTop:10,
}}>
<View style={{
paddingTop:0,
borderWidth:1,
borderColor:'#E5E5E5'
}}></View>
</View>
</View>
<View style={{
flex:1,
alignItems:'center',
flexDirection:'row',
justifyContent:'space-between',
paddingHorizontal:20,
height:50,
width:'100%',
borderRadius:10,
backgroundColor:'#0C6278',
}}>
<Text style={{
color:'white',
}}>Saldo</Text><Text style={{
color:'white'
}}>R$ 0,00</Text>
</View>
</View>
);
}
Tela de info do cartão estudantil
import React from 'react';
import { Pressable, Text, TextInput, View, Image} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
export default function Infcard({navigation}) {
return (
<View
style={{
flex:1,
flexDirection: 'space-between',
backgroundColor:'white',
}}>
<View style={{
flex:9
}}>
<View style={{
height:140,
backgroundColor:'#0C6278',
justifyContent: 'flex-end',
alignItems:'center',}}>
<View>
<Pressable style={{
position:'absolute',
top:25,
right:110,
height:35,
width:35,
backgroundColor:'#13748D',
borderRadius:20,
justifyContent:'center',
alignItems:'center'}}
onPress={() => navigation.navigate ('perfil')}>
<AntDesign name="user" size={20} color="white" />
</Pressable>
</View>
<View style={{
position:'relative',
height:153,
width:262,
top:70,
backgroundColor:'#111828',
borderRadius:10,
justifyContent:'center',
alignItems:'center'}}>
<View style={{
position:'absolute',
top:40,
left:15,
flexDirection:'row'
}}>
<Image style={{
width: 30,
height: 30,
}}
source={require('./imagens/mochila.png')}/>
</View>
<View style={{
position:'absolute',
top:85,
left:20
}}>
<Text style={{
color:'white',
fontSize:14
}}>Passe estudantil </Text>
</View>
<View style={{
top:56,
width:262,
height:40,
borderRadius:10,
backgroundColor:'#0C6278',
alignItems:'center',
justifyContent:'center'
}}>
<View style={{
flexDirection:'row',
}}>
<Text style={{
color:'white'
}}>88 Acessos restantes </Text>
<Pressable>
<View style={{
paddingLeft:90
}}>
<Image
style={{
width: 20,
height: 20,
}}
source={require('./imagens/mostrar.png')}
/>
</View>
</Pressable>
</View>
</View>
</View>
</View>
<View style={{
height:130,
width:10,
}}>
</View>
<View style={{
}}>
<Text style={{
paddingLeft:15
}}>ACESSO RÁPIDO</Text>
<View style={{
top:40,
flexDirection:'row',
justifyContent:'center',
}}>
<View>
<Pressable style={{
height:107,
width:90,
backgroundColor:'#0C6278',
borderRadius:10,
alignItems:'center',
}}
onPress={() => navigation.navigate ('/')}>
<Image
style={{
top:20,
width:26,
height:26,
}}
source={require('./imagens/extrato.png')}
/>
<Text style={{
paddingTop:25,
color:'white',
paddingLeft:10
}}>Extrato de uso</Text>
</Pressable>
</View>
<View style={{
paddingLeft:100
}}>
<Pressable style={{
height:107,
width:90,
backgroundColor:'#0C6278',
borderRadius:10,
alignItems:'center',
}}
onPress={() => navigation.navigate ('/')}>
<Image
style={{
top:20,
width: 26,
height: 26,
}}
source={require('./imagens/atendimento.png')}
/>
<Text style={{
paddingTop:25,
color:'white',
paddingLeft:0,
}}>Atendimento</Text>
</Pressable>
</View>
</View>
</View>
<View style={{
width:10,
height:120,
}}></View>
<View>
<Pressable style={{
flexDirection:'row',
paddingLeft:20
}}>
<Image
style={{
width: 19,
height: 19,
}}
source={require('./imagens/editar.png')}
/> <Text style={{
paddingLeft:8,
}}>Editar</Text>
</Pressable>
</View>
<View>
<Pressable style={{
flexDirection:'row',
paddingLeft:20,
paddingTop:10
}} onPress={() => navigation.navigate ('cartoes',alert('Cartão removido com sucesso'))}>
<Image
style={{
width: 19,
height: 19,
}}
source={require('./imagens/remover.png')}
/> <Text style={{
color:'red',
paddingLeft:8,
}}>Remover cartão</Text>
</Pressable>
</View>
</View>
<View style={{
flex:1
}}>
<Pressable style={{
width:'100%',
height:60,
backgroundColor:'#0C6278',
borderRadius:10,
alignItems:'center',
justifyContent:'center',
}}
onPress={() => navigation.navigate ('cartoessalv')}>
<Image style={{
width: 23,
height: 23,
}}
source={require('./imagens/casa.png')} />
<Text style={{
color:'white'
}}>Início</Text>
</Pressable>
</View>
</View>
);
}
Criar projeto no Figma
Tela do cartão cadastrado
Criar paleta de cores
Tela de cadastro do usuário
import React, {useState} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Pressable, Text, TextInput, View, CheckBox, StyleSheet } from 'react-native';
import paybus from "./imagens/paybus.png";
export default function Cadastrar({navigation}) {
const [isSelected, setSelection] = useState(false);
return (
<View
style={{
flex: 1,
padding: 16,
backgroundColor:'#111828',
alignItems:'center',
}}>
<View style={{
alignSelf:'flex-start',
}}>
<Text
style={{
color: 'white',
fontSize: 36,
fontFamily:'arial',
padding: 16,
}}>
Sing Up
</Text>
</View>
<View style={{
flexDirection:'row',
paddingTop:50,
justifyContent:'space-around',
alignItems:'center'
}}>
<View style={{
}}>
<TextInput
style={{
height:35,
width:125,
borderWidth: 1,
borderColor: "white",
padding: 10,
marginBottom: 16,
borderRadius: 28,
color:'white'
}}
placeholder="Nome"
placeholderTextColor ='white'
/>
</View>
<View style={{
paddingLeft:20
}}>
<TextInput
style={{
height:35,
width:125,
borderWidth: 1,
borderColor: "white",
padding: 10,
marginBottom: 16,
borderRadius: 28,
color:'white'
}}
placeholder="Sobrenome"
placeholderTextColor ='white'
/>
</View>
</View>
<TextInput
style={{
height:37,
width:269,
borderWidth: 1,
borderColor: "white",
padding: 10,
marginBottom: 16,
borderRadius: 28,
color:'white'
}}
placeholder="Email"
placeholderTextColor ='white'
/>
<TextInput
style={{
height:37,
width:269,
borderWidth: 1,
borderColor: "white",
padding: 10,
marginBottom: 16,
borderRadius: 28,
color:'white'
}}
placeholder="Senha" securyText={true}
placeholderTextColor ='white'
/>
<TextInput
style={{
height:37,
width:269,
borderWidth: 1,
borderColor: "white",
padding: 10,
marginBottom: 16,
borderRadius: 28,
color:'white'
}}
placeholder="Confirmar senha"
placeholderTextColor ='white'
/>
<View style={{flex: 0.5,
alignItems: "center",
margin:10,
flexDirection: "row",
}}>
<CheckBox
value={isSelected}
onValueChange={setSelection}
/><Text style={{
color:'white',
paddingLeft:5
}}>Eu concordo com a política e privacidade</Text>
</View>
<View style={{ paddingTop: 16 }}>
<Pressable
style={({ pressed }) => [
{ backgroundColor: '#111828' },
{ alignItems: 'center',
padding: 8,
borderRadius: 28,
height:37,
width:267,
borderWidth:1,
borderColor:'white'},
]}
onPress={() => navigation.navigate('entrar')}>
<Text style={{
color: 'white',
fontSize: 14
}}>REGISTRAR</Text>
</Pressable>
</View>
</View>
);
}
Tela de recuperar senha
Tela de recuperar senha
import React from 'react';
import { Pressable, Text, TextInput, View, Image} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
export default function Codigoderec({navigation}) {
return (
<View
style={{
flex:1,
flexDirection: 'space-between',
backgroundColor:'white',
}}>
<View style={{
flex:8
}}>
<View style={{
height:140,
backgroundColor:'#0C6278',
justifyContent: 'flex-end',}}>
<View style={{
borderWidth:1,
borderColor:'white',
}}></View>
<Text style={{
fontSize: 20,
color: 'white',
marginLeft:8,
padding:5
}}>Recuperar senha</Text>
</View>
<View style={{
paddingTop:10
}}>
<View style={{
paddingLeft:30,
}}>
<View style={{
paddingBottom:30
}}>
<Text style={{
fontSize:13
}}>por favor, insira o código que foi enviado para{'\n'}seu e-mail
<View style={{
justifyContent:'center',
borderRadius:9,
width:282,
height:35,
backgroundColor:'#E5E5E5',
paddingLeft:20,
}}>
<Text style={{
fontSize:13
}}>fula***@gmail.com</Text>
</View>
<View style={{
paddingTop:30,
paddingLeft:13,
}}>
<Text style={{
fontSize:13
}}>Essa etapa é importante para garantir a segurança{'\n'}dos seus dados.</Text>
</View>
</View>
<View style={{
alignItems:'center'
}}>
<View style={{
flexDirection:'row'
}}>
<View style={{
}}>
<TextInput style={{
backgroundColor:'white',
width:31,
height:28,
borderRadius:4,
shadowOffset: {width: 0, height: 2},
shadowColor: 'gray',
}}/>
</View>
<View style={{
paddingLeft:10
}}>
<TextInput style={{
backgroundColor:'white',
width:31,
height:28,
borderRadius:4,
shadowOffset: {width: 0, height: 2},
shadowColor: 'gray',
}}/>
</View>
<View style={{
paddingLeft:10
}}>
<TextInput style={{
backgroundColor:'white',
width:31,
height:28,
borderRadius:4,
shadowOffset: {width: 0, height: 2},
shadowColor: 'gray',
}}/>
</View>
<View style={{
paddingLeft:30
}}>
<TextInput style={{
backgroundColor:'white',
width:31,
height:28,
borderRadius:4,
shadowOffset: {width: 0, height: 2},
shadowColor: 'gray',
}}/>
</View>
<View style={{
paddingLeft:10
}}>
<TextInput style={{
backgroundColor:'white',
width:31,
height:28,
borderRadius:4,
shadowOffset: {width: 0, height: 2},
shadowColor: 'gray',
}}/>
</View>
<View style={{
paddingLeft:10
}}>
<TextInput style={{
backgroundColor:'white',
width:31,
height:28,
borderRadius:4,
shadowOffset: {width: 0, height: 2},
shadowColor: 'gray',
}}/>
</View>
</View>
</View>
<View style={{
alignItems:'center',
paddingTop:30
}}>
<Pressable onPress={() => navigation.navigate ('codigoderec')}>
<Text style={{
borderBottomWidth:1,
borderBottomColor:'black'
}}>Reenviar código</Text>
</Pressable>
</View>
</View>
</View>
<View style={{
alignItems:'center',
flex:1
}}>
<Pressable style={{
width:269,
height:37,
backgroundColor:'#0C6278',
borderRadius:24,
alignItems:'center',
justifyContent:'center',
borderWidth:1,
borderColor:'#0C6278'
}}
onPress={() => navigation.navigate ('recuperarsenha')}>
<Text style={{
color:'white'
}}>Continuar</Text>
</Pressable>
</View>
</View>
);
}
Tela de cadastro
Criar uma tela de cadastro.
Tela de alterar senha
Tela de alterar senha
import React from 'react';
import { Pressable, Text, TextInput, View, Image} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
export default function Alterarsenha({navigation}) {
return (
<View
style={{
flex:1,
flexDirection: 'space-between',
backgroundColor:'white',
}}>
<View style={{
flex:9
}}>
<View style={{
height:140,
backgroundColor:'#0C6278',
justifyContent: 'flex-end',}}>
<View style={{
paddingTop:5,
}}>
<Pressable style={{
position:'relative',
paddingLeft:10,
height:30,
bottom:60,
}}
onPress={() => navigation.navigate ('cartoes')}>
<Ionicons name="ios-arrow-back-circle-outline" size={30} color="white" />
</Pressable>
</View>
<View style={{
borderWidth:1,
borderColor:'white',
}}></View>
<Text style={{
fontSize: 20,
color: 'white',
marginLeft:8,
padding:5
}}>Alterar senha</Text>
</View>
<View style={{
paddingTop:80
}}>
<View style={{
paddingLeft:20,
paddingTop:40,
}}>
<View style={{
paddingTop:5
}}>
<TextInput style={{
borderWidth: 1,
height:37,
width:303,
padding: 10,
borderColor: "#0C6278",
borderRadius: 30,
}}
placeholder='Nova senha'
placeholderTextColor='black'
/>
</View>
</View>
<View style={{
flexDirection:'row',
paddingTop:30,
justifyContent:'space-around',
alignItems:'center'
}}>
</View>
<View style={{
paddingLeft:20,
paddingTop:5,
}}>
<View style={{
paddingTop:5
}}>
<TextInput style={{
borderWidth: 1,
height:37,
width:303,
padding: 10,
borderColor: "#0C6278",
borderRadius: 30
}}
placeholder='Confimar senha'
placeholderTextColor='black'
/>
</View>
</View>
</View>
<View style={{
paddingTop:90,
alignItems:'center'
}}>
<Pressable style={{
width:269,
height:31,
backgroundColor:'white',
borderRadius:24,
alignItems:'center',
justifyContent:'center',
borderWidth:1,
borderColor:'#0C6278'
}}
onPress={() => navigation.navigate ('entrar')}>
<Text>Continuar</Text>
</Pressable>
</View>
</View>
<View style={{
flex:1
}}>
<Pressable style={{
width:'100%',
height:60,
backgroundColor:'#0C6278',
borderRadius:10,
alignItems:'center',
justifyContent:'center',
}}
onPress={() => navigation.navigate ('cartoessalv')}>
<Image style={{
width: 23,
height: 23,
}}
source={require('./imagens/casa.png')} />
<Text style={{
color:'white'
}}>Início</Text>
</Pressable>
</View>
</View>
);
}
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.