Diseño de la pantalla de Inicio

Inicio.js

+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import type {Node} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+  Image,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  LearnMoreLinks,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+const Section = ({children, title}): Node => {
+  const isDarkMode = useColorScheme() === 'dark';
+  return (
+    <View style={styles.sectionContainer}>
+      <Text
+        style={[
+          styles.sectionTitle,
+          {
+            color: isDarkMode ? Colors.white : Colors.black,
+          },
+        ]}>
+        {title}
+      </Text>
+      <Text
+        style={[
+          styles.sectionDescription,
+          {
+            color: isDarkMode ? Colors.light : Colors.dark,
+          },
+        ]}>
+        {children}
+      </Text>
+    </View>
+  );
+};
+
+const App: () => Node = () => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+	<View style={[styles.container, { flexDirection: "column" /*Contenedor principal*/}]}>
+		<View style={{ flex: 1 }}>
+		
+			<View style={[styles.header, { flexDirection: "row" /*Contenedor de perfil superior*/}]}>
+				<View style={{ flex: 0.8 }}>
+					<Image style={styles.perfil} source={require('./assets/img/photoProfiles/default.png')} />
+				</View>
+				<View style={{ flex: 2 /*Contenedor de los textos de cabecera*/}}>
+					<Text style={[styles.bienvenida]}>Bienvenido, Raúl</Text>
+					<Text style={[styles.nombreCentro]}>IES Jabalcuz</Text>
+				</View>
+			</View>
+			
+		</View>			
+		<View style={{ flex: 4.6 }}>
+			<Text style={[styles.estaSemana]}>Esta semana</Text>
+			<View style={[styles.hr /*_______________________________________*/]}/>
+			
+			<View style={[styles.botonera, { flexDirection: "column" /*Contenedor de las botoneras*/}]}>
+				<View style={{ flex: 1.5, backgroundColor: "#FCCE90" }}>
+					
+					<View style={[{flexDirection: "row" }]}>
+						<View style={[styles.botonGuardias, { flex: 1 }]}>
+							<Image style={styles.iconoGuardias} source={require('./assets/img/icons/alert.png')} />
+						</View>
+						<View style={[styles.botonGuardias, { flex: 3 }]}>
+							<Text style={[styles.textoGuardias]}>Tiene 2 guardias{"\n"}pendientes</Text>
+						</View>
+					</View>
+					
+				</View>
+				<View style={{ flex: 0.8, backgroundColor: "white", top: 30 }}>
+					<View style={[styles.hr2 /*_______________________________________*/]}/>
+				</View>
+				
+				<View style={{ flex: 3.2 }}>
+					
+					<View style={[styles.botonesHorizonales, { flexDirection: "column"}]}>
+						<View style={{ flex: 1.4, backgroundColor: "#A1B6FC" }}>
+							
+							<View style={[styles.contenedorBoton, { flexDirection: "row"}]}>
+								<View style={{ flex: 0.9}}>
+									<Text style={[styles.numerosTarea]}>6</Text>
+								</View>
+								<View style={{ flex: 1.4}}>
+									<Text style={[styles.textoTarea]}>Instalaciones{"\n"}Rerservadas</Text>
+								</View>
+							</View>
+							
+							
+						</View>
+						
+						<View style={{ flex: 0.2 }} />
+						
+						<View style={{ flex: 1.4, backgroundColor: "#AEE58F" }}>
+						
+							<View style={[styles.contenedorBoton, { flexDirection: "row"}]}>
+								<View style={{ flex: 0.9}}>
+									<Text style={[styles.numerosTarea]}>3</Text>
+								</View>
+								<View style={{ flex: 1.4}}>
+									<Text style={[styles.textoTarea]}>Listas de materiales{"\n"}reservadas</Text>
+								</View>
+							</View>
+							
+						</View>
+					</View>
+				</View>
+			</View>
+		</View>
+		<View style={{ flex: 0.5 /*Espacio preparado para taskbar*/}} />
+	</View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+  header: {
+	flex: 1, 
+	padding: 0,
+  },
+  botonera: {
+	flex: 1, 
+	padding: 0,
+  },
+  botonesHorizonales: {
+	flex: 1, 
+	padding: 0,
+  },
+  hr: { /*Linea divisoria baso "Esta Semana"*/
+	borderWidth: 0.5,
+    borderColor: 'grey',
+	marginTop: 3,
+	marginBottom: 10,
+  },
+  hr2: { /*Linea divisoria que separa los dos tipos de botones */
+	borderWidth: 0.6,
+    borderColor: 'grey',
+	marginTop: 0,
+	marginBottom: 0,
+  },
+  estaSemana: {
+	fontSize: 18.0,
+	color: '#8492A6',
+  },
+  bienvenida: {
+	fontSize: 30.0,
+	color: '#1F2D3D',
+	top: 5
+  },
+  nombreCentro: {
+	fontSize: 19.0,
+	color: '#8492A6',
+	top: 7
+  },
+  numerosTarea: {
+	fontSize: 70.0,
+	textAlign: 'center',
+	color: '#1F2D3D',
+	bottom: 2,
+	marginRight: 13,
+  },
+  textoTarea: {
+	fontSize: 22.0,
+	color: '#1F2D3D',
+	textAlign: 'right',
+	marginRight: 15,
+	top: 19
+  }, 
+  contenedorBoton: {
+	flex: 1,
+	marginLeft: 15, 
+	marginTop: 10,
+  },
+  botonGuardias: {
+	marginTop: 35
+  },
+  textoGuardias: {
+	fontSize: 20.0,
+	color: '#1F2D3D',
+	textAlign: 'right',
+	marginRight: 35,
+	bottom: 5
+  },
+  iconoGuardias: {
+	width: 80,
+	height: 80,
+	resizeMode: 'contain', 
+	bottom: 20,
+	left: 40
+  },
+  perfil: {
+	width: 85,
+	height: 85,
+	resizeMode: 'contain', 
+  },
+  textoAusencias: {
+	fontSize: 222.0,
+	color: '#1F2D3D',
+	textAlign: 'center',
+	top: 20
+  },
+});
+
+export default App;