mobile nav with params

This commit is contained in:
Maria Sanchez 2022-08-22 00:09:51 -06:00
parent 66511f4e8a
commit ec5c738e6b
4 changed files with 75 additions and 13 deletions

View File

@ -19,19 +19,23 @@ const Tab = createBottomTabNavigator();
function HomeTab() { function HomeTab({route}) {
const [selected, setSelected] = useState(0); const [selected, setSelected] = useState(0);
const user = route.params;
console.log(user);
return ( return (
<Tab.Navigator initialRouteName="Comunicados" > <Tab.Navigator initialRouteName="Comunicados" >
<Tab.Screen name="Comunicados" component={Home} options={{headerStyle: { <Tab.Screen name="Comunicados" component={Home} params={user} options={{headerStyle: {
backgroundColor: "#D7A86E" backgroundColor: "#D7A86E"
}, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)} /> }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)}
<Tab.Screen name="Reservas" component={Reservas } options={{headerStyle: { />
<Tab.Screen name="Reservas" component={Reservas } params={user} options={{headerStyle: {
backgroundColor: "#D7A86E" backgroundColor: "#D7A86E"
}, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)} /> }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)} />
<Tab.Screen name="Perfil" component={Profile} options={{headerStyle: { <Tab.Screen name="Perfil" component={Profile} params={user} options={{headerStyle: {
backgroundColor: "#D7A86E" backgroundColor: "#D7A86E"
}, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} /> }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} />
</Tab.Navigator> </Tab.Navigator>

View File

@ -36,7 +36,7 @@ export default function LogIn({navigation}) {
const userData = { const userData = {
email: "lalo@lalo.com", email: "lalo@lalo.com",
password: '65bbb27d640914c507e5af778eccf3d1' password: '12345'
} }
console.log(userData); console.log(userData);
@ -64,6 +64,8 @@ export default function LogIn({navigation}) {
// inqulino 4 y guarda 63 // inqulino 4 y guarda 63
const user = response.message const user = response.message
//console.log(user);
cookies.set('id',user._id, {path: "/"} ) cookies.set('id',user._id, {path: "/"} )
cookies.set('name',user.name, {path: "/"} ) cookies.set('name',user.name, {path: "/"} )
@ -71,13 +73,9 @@ export default function LogIn({navigation}) {
cookies.set('type',user.user_type, {path: "/"} ) cookies.set('type',user.user_type, {path: "/"} )
if(user.user_type == '4'){ if(user.user_type == '4'){
navigation.navigate('Comunicados')
}else if(user.user_type == '3'){ }else if(user.user_type == '3'){
navigation.navigate('Comunicados', {user})
} }
}) })

View File

@ -10,8 +10,11 @@ import {
Center Center
} from "native-base"; } from "native-base";
export default function Profile({navigation}){ export default function Profile({route, navigation}){
const user = route.params;
console.log(user);
return ( return (
<Center> <Center>
<Box safeArea p="2" w="90%" maxW="290" py="8"> <Box safeArea p="2" w="90%" maxW="290" py="8">

View File

@ -0,0 +1,57 @@
import React from "react";
import {
Box,
Heading,
VStack,
FormControl,
Input,
Button,
Center
} from "native-base";
export default function ProfileGuarda({navigation}){
return (
<Center>
<Box safeArea p="2" w="90%" maxW="290" py="8">
<Heading size="lg" color="coolGray.800" _dark={{
color: "warmGray.50"
}} fontWeight="semibold">
Katoikia
</Heading>
<Heading mt="1" color="coolGray.600" _dark={{
color: "warmGray.200"
}} fontWeight="medium" size="xs">
Modifique sus datos
</Heading>
<VStack space={3} mt="5">
<FormControl>
<FormControl.Label>Nombre</FormControl.Label>
<Input type="text"/>
</FormControl>
<FormControl>
<FormControl.Label>Correo Electrónico</FormControl.Label>
<Input type="text" />
</FormControl>
<FormControl>
<FormControl.Label>Teléfono</FormControl.Label>
<Input type="text" />
</FormControl>
<FormControl>
<FormControl.Label>Contraseña actual</FormControl.Label>
<Input type="password" />
</FormControl>
<Button mt="2" backgroundColor="orange.300">
Actualizar
</Button>
<Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
Cerrar sesión
</Button>
</VStack>
</Box>
</Center>
)
}