Professional Documents
Culture Documents
// Estilos
const colors = {
primary: '#85b7e9',
secondary: '#6C757D',
background: '#F8F9FA',
black: '#000',
white: '#FFF',
};
servicesContainer: {
marginBottom: 40,
},
sectionTitle: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 10,
padding: 20,
},
serviceItem: {
marginBottom: 20,
backgroundColor: 'white',
padding: 20,
borderRadius: 10,
},
serviceImage: {
width: 50,
height: 50,
marginBottom: 10,
alignSelf: 'center',
},
serviceTitle: {
fontSize: 18,
fontWeight: 'bold',
},
serviceDescription: {
fontSize: 16,
marginBottom: 10,
},
serviceButton: {
backgroundColor: colors.primary,
padding: 10,
borderRadius: 5,
alignSelf: 'flex-end',
},
serviceButtonText: {
color: 'white',
fontWeight: 'bold',
},
infoBoxContainer: {
backgroundColor: colors.primary,
borderRadius: 20,
padding: 20,
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 999,
alignItems: 'center',
justifyContent: 'center',
},
infoBoxTitle: {
fontSize: 24,
fontWeight: 'bold',
color: colors.white,
marginBottom: 10,
},
infoBoxText: {
fontSize: 18,
color: colors.white,
textAlign: 'center',
},
closeButton: {
marginTop: 15,
padding: 10,
backgroundColor: colors.secondary,
borderRadius: 10,
},
closeButtonText: {
color: colors.white,
fontWeight: 'bold',
},
bottomContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
paddingVertical: 20,
},
icon: {
fontSize: 40,
color: colors.primary,
},
additionalContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 20,
marginTop: 20,
},
additionalItem: {
alignItems: 'center',
},
additionalImage: {
width: 80,
height: 80,
borderRadius: 40,
marginBottom: 5,
marginHorizontal: 5,
},
additionalTitle: {
fontWeight: 'bold',
},
});
// Pantalla de inicio
function APPLabo() {
const [servicesData] = useState([
{
id: 1,
title: 'Medicina General',
description: 'Atención integral a adultos y niños.',
imageUrl: 'https://cdn-icons-png.flaticon.com/128/12193/12193821.png',
},
{
id: 2,
title: 'Odontólogos',
description: 'Servicios dentales profesionales para todas las
edades.',
imageUrl: 'https://cdn-icons-png.flaticon.com/128/10346/10346932.png',
},
{
id: 3,
title: 'Consulta con especialistas',
description: 'Consultas expertas con médicos especialistas.',
imageUrl: 'https://cdn-icons-png.flaticon.com/128/10299/10299211.png',
},
]);
const Tab = createBottomTabNavigator();
return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
activeTintColor: '#85b7e9',
inactiveTintColor: '#6C757D',
}}
>
<Tab.Screen
name="Inicio"
component={InicioScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri:
'https://cdn-icons-gif.flaticon.com/8121/8121334.gif' }}
style={{ width: 30, height: 30 }}
/>
),
}}
/>
<Tab.Screen
name="Servicio Medicos"
component={CalendarioScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri:
'https://cdn-icons-gif.flaticon.com/6416/6416392.gif' }}
style={{ width: 30, height: 30 }}
/>
),
}}
/>
<Tab.Screen
name="Iniciar Sesion"
component={RegistroScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri:
'https://cdn-icons-gif.flaticon.com/8121/8121295.gif' }}
style={{ width: 30, height: 30 }}
/>
),
}}
/>
<Tab.Screen
name="Especialista"
component={InformacionScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri:
'https://cdn-icons-gif.flaticon.com/6569/6569161.gif' }}
style={{ width: 30, height: 30 }}
/>
),
}}
/>
<Tab.Screen
name="Historial"
component={LaboratorioScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri:
'https://cdn-icons-gif.flaticon.com/6172/6172541.gif' }}
style={{ width: 30, height: 30 }}
/>
),
}}
/>
return (
<ScrollView style={styles.container}>
{/* Header */}
<View style={styles.header}>
<Image
source={{ uri: 'your-logo-url' }}
style={styles.logo}
/>
<Text style={[styles.headerText, { color: 'white' }]}>Centro
Médico</Text>
</View>
{/* Additional Circles with Images and Titles */}
{servicesData.map((service) => (
<TouchableOpacity key={service.id} style={styles.serviceItem}
onPress={() => showServiceInfo(service)}>
<Image
source={{ uri: service.imageUrl }}
style={styles.serviceImage}
/>
<Text style={styles.serviceTitle}>{service.title}</Text>
<Text
style={styles.serviceDescription}>{service.description}</Text>
<TouchableOpacity style={styles.serviceButton} onPress={() =>
showServiceInfo(service)}>
<Text style={styles.serviceButtonText}>Informacion</Text>
</TouchableOpacity>
</TouchableOpacity>
))}
</View>
Cita
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Image, StyleSheet, ScrollView,
TextInput, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
function CalendarioScreen() {
const navigation = useNavigation();
const [selectedCategory, setSelectedCategory] = useState(null);
const [formData, setFormData] = useState({
name: '',
email: '',
phoneNumber: '',
message: '',
});
const [confirmationMessage, setConfirmationMessage] = useState('');
useEffect(() => {
if (confirmationMessage) {
setTimeout(() => {
setConfirmationMessage('');
setSelectedCategory(null);
}, 3000); // Cerrar el mensaje de confirmación después de 3 segundos
}
}, [confirmationMessage]);
const categories = [
{ id: 1, name: 'Medicina General', image: { uri: 'https://cdn.icon-
icons.com/icons2/1749/PNG/96/18_113669.png' } },
{ id: 2, name: 'Pediatría', image: { uri:
'https://th.bing.com/th/id/OIP.JHUw7cBT_vwGRYs8RE97LQHaHa?
rs=1&pid=ImgDetMain' } },
{ id: 3, name: 'Dentista', image: { uri:
'https://cdn.icon-icons.com/icons2/944/PNG/96/medical-24_icon-
icons.com_73920.png' } },
{ id: 4, name: 'Dermatología', image: { uri: 'https://cdn-icons-
png.flaticon.com/128/6025/6025105.png' } },
{ id: 5, name: 'Oftalmología', image: { uri: 'https://cdn-icons-
png.flaticon.com/128/2857/2857950.png' } },
{ id: 6, name: 'Consulta', image: { uri:
'https://cdn.icon-icons.com/icons2/831/PNG/96/medical_icon_stethoscope_icon-
icons.com_66663.png' } },
{ id: 5, name: 'Laboratorio clínico ', image: { uri: 'https://cdn-icons-
png.flaticon.com/128/6976/6976273.png' } },
{ id: 6, name: 'Cardiología', image: { uri: 'https://cdn.icon-
icons.com/icons2/944/PNG/96/medical-08_icon-icons.com_73945.png' } },
{ id: 5, name: 'Psicologo', image: { uri: 'https://cdn-icons-
png.flaticon.com/128/4525/4525519.png' } },
{ id: 6, name: 'Ortopedia', image: { uri: 'https://cdn-icons-
png.flaticon.com/128/9340/9340043.png' } },
];
return (
<View style={styles22.container}>
<View style={styles22.topBox}>
<View style={styles22.topContent}>
<Image
source={{ uri:
'https://th.bing.com/th/id/OIP.igRNQL_w48lKs47obKClOwHaHa?
pid=ImgDet&w=201&h=201&c=7' }}
style={styles22.topImage}
/>
<Text style={styles22.topText}>Consultas Medicas</Text>
</View>
</View>
<Text style={styles22.title}>Selecciona una Especialidad:</Text>
<ScrollView
contentContainerStyle={styles22.scrollViewContainer}
style={styles22.scrollView}
>
<View style={styles22.gridContainer}>
{categories.map((category) => (
<TouchableOpacity
key={category.id}
style={styles22.categoryButton}
onPress={() => handleCategorySelect(category)}
>
<Image
source={category.image}
style={styles22.categoryImage}
/>
<Text style={styles22
.categoryName}>
{category.name}
</Text>
</TouchableOpacity>
))}
</View>
</ScrollView>
Registro
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, Image, StyleSheet } from
'react-native';
import { useNavigation } from '@react-navigation/native'; // Importa
useNavigation
// Asegúrate de que 'PaginaNueva' esté definido en tus rutas de navegación
function RegistroScreen() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const navigation = useNavigation(); // Obtén la función de navegación
const defaultUser = {
email: 'pao@gmail.com',
password: '123',
};
return (
<View style={styles.container}>
<Text style={styles.title}>Inicio de Sesión</Text>
<Image
source={{
uri: 'https://th.bing.com/th/id/OIP.2DzLB3PVM-Zp7jv1lOa_QgHaF7?
w=225&h=180&c=7&r=0&o=5&cb=11&pid=1.7',
}}
style={styles.logo}
/>
<TextInput
style={styles.input}
placeholder="Correo electrónico"
keyboardType="email-address"
placeholderTextColor="#999"
value={email}
onChangeText={setEmail}
/>
<TextInput
style={styles.input}
placeholder="Contraseña"
secureTextEntry
placeholderTextColor="#999"
value={password}
onChangeText={setPassword}
/>
<TouchableOpacity style={styles.button} onPress={handleLogin}>
<Text style={styles.buttonText}>Iniciar Sesión</Text>
</TouchableOpacity>
<TouchableOpacity onPress={handleGoToRegister}>
<Text style={styles.registerText}></Text>
</TouchableOpacity>
</View>
);
}
Especialista
import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, Image, TouchableOpacity,
StyleSheet, SafeAreaView } from 'react-native';
const medications = [
{ id: 1, name: 'Dr. Hiromi Hernandez', image:
'https://th.bing.com/th/id/OIP.Hr64V0wGFl9eIcLewy3zYQHaE7?
w=259&h=180&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Cardiología\
nExperiencia: 10 años\nUbicación: Hospital Central', phone: '123-456-
7890' },
{ id: 2, name: 'Dr. Manuel Mendoza', image:
'https://th.bing.com/th/id/OIP.jswifnaRgWnkl5Yv_WJwoAHaE8?
w=260&h=188&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Pediatría\
nExperiencia: 8 años\nUbicación: Centro Médico ABC', phone: '456-789-
0123' },
{ id: 3, name: 'Dr. Silvia Garcia', image:
'https://th.bing.com/th/id/OIP.PM9z0KtPLua5c6k0HFSfEQHaJY?
w=145&h=183&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Ginecología\
nExperiencia: 12 años\nUbicación: Hospital Universitario', phone: '789-012-
3456' },
{ id: 4, name: 'Dr. David Méndez', image:
'https://th.bing.com/th/id/OIP.kmyIEPMSiCKD8RhAS60C6AHaFb?
w=246&h=181&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Cirugía General\
nExperiencia: 15 años\nUbicación: Hospital Metropolitano', phone: '012-345-
6789' },
{ id: 5, name: 'Dr. Wiliam Piñero', image:
'https://th.bing.com/th/id/OIP.vLCaIp6TvzOHhp6A3HgNvAHaEQ?
w=283&h=180&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Psiquiatría\
nExperiencia: 7 años\nUbicación: Clínica del Este', phone: '345-678-9012' },
{ id: 6, name: 'Dr. Romina Avila', image:
'https://th.bing.com/th/id/OIP.bX7sJjV0-DZkiurvXiSY4AHaFd?
w=217&h=185&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Dermatología\
nExperiencia: 9 años\nUbicación: Centro Médico San Francisco', phone: '678-
901-2345' },
{ id: 7, name: 'Dr. Sebastian Torres', image:
'https://th.bing.com/th/id/OIP.s3mQLGK7nHMzwrv3BNgQTAHaEl?
w=283&h=180&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Oftalmología\
nExperiencia: 11 años\nUbicación: Clínica Oftalmológica Avanzada', phone:
'901-234-5678' },
];
return (
<SafeAreaView style={styles.safeAreaContainer}>
<View style={styles.container}>
<View style={styles.headerContainer}>
<Text style={styles.headerText}>Doctores</Text>
</View>
<View style={styles.searchContainer}>
<TextInput
style={styles.input}
placeholder="Buscar médico..."
onChangeText={(text) => handleSearch(text)}
/>
<Button title="Buscar" onPress={() => {}} />
</View>
<FlatList
data={searchText ? filteredDoctors : medications}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
{selectedDoctor && (
<View style={styles.doctorDetailContainer}>
<Image source={{ uri: selectedDoctor.image }}
style={styles.doctorDetailImage} />
<Text
style={styles.doctorDetailText}>{selectedDoctor.name}</Text>
<Text style={styles.doctorInfoText}>{selectedDoctor.info}</Text>
<Text style={styles.doctorPhoneText}>Teléfono:
{selectedDoctor.phone}</Text>
<Text style={styles.ratingText}>¿Cómo calificarías a este
médico?</Text>
<View style={styles.ratingContainer}>
{/* Estilo personalizado para los botones de calificación */}
<TouchableOpacity style={styles.positiveButton}
onPress={handlePositiveRating}>
Historial
import React from 'react';
import { View, Text, FlatList, ImageBackground, StyleSheet } from 'react-
native';