2- Creando la estructura de nuestra aplicación

  Creando la estructura de nuestra aplicación

¡Comenzamos con la base de nuestro proyecto! 📱💻

En este primer paso, definimos la estructura de la aplicación, que se compone de 3 partes clave:

1️⃣ Cabecera: Contendrá el formulario con los datos del cotitular.
2️⃣ Resultado: Aquí se mostrará el cálculo generado.
3️⃣ Botón inferior: Permitirá recalcular o realizar nuevas operaciones.

👨💻 Implementación en código

• Usamos Fragment para agrupar múltiples elementos sin renderizar contenedores extra.

• Aplicamos estilos con StyleSheet (ejemplo: bordes redondeados, colores, centrado de texto).

javascript

// Ejemplo de estructura básica
<>
  <View style={styles.header}>  
    <Text>Formulario de cabecera</Text>  
  </View>  
  <View style={styles.result}>  
    <Text>Resultado</Text>  
  </View>  
  <View style={styles.button}>  
    <Text>Calcular</Text>  
  </View>  
</>

🎨 Estilos dinámicos

• Sintaxis similar a CSS, pero con camelCase (ej: backgroundColor).

• Unidades: puntos (sin "px") o porcentajes (entre comillas).

javascript

const styles = StyleSheet.create({
  header: {
    backgroundColor: 'red',
    height: 200,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    alignItems: 'center'
  }
});

⚠️ Importante:

• No todos los componentes aceptan style. Consulta la documentación oficial de React Native.

📌 Próximos pasos:
¡Añadiremos el formulario y ajustaremos los estilos visuales!

¿Te gustaría ver algún detalle en específico? ¡Déjalo en los comentarios! 👇

#ReactNative #DesarrolloMovil #EstructuraDeApps