Aprende a crear la navegación de tu app

José Eduardo Rendón Valencia

student•

Estilos de Header

const styles = StyleSheet.create({
  container: {
    height: sizes.headerHeight,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 8,
  },
  arrowIcon: {
    width: 25,
    height: 21,
  },
  logo: {
    width: 96,
    height: 17,
  },
  cartBtn: {
    width: 25,
    height: 25,
  },
});

Juanito Ortega Guzmán

student•

¿Por qué no se adjuntó los archivos en cada video?... unos videos atrás también usas una carpeta con imágenes que nosotros no tenemos, y fui a los cursos anteriores y resulta que no son exactamente los mismos archivos. Este curso me está re costando seguirlo como se debería. Por favor comparte los assets que tienes y por si puedes subir a github el proyecto para comparar el código si nos equivocamos en algo. Gracias

Lucio Negrello

teacher•

Hola Juanito, cómo estás? En este repo está el proyecto completo que utilizamos y el blueprint del sitio que proviene del curso de creación de tiendas. El mismo se comparte al comenzar el curso, pero te lo dejo por acá así lo tenés más a mano. Saludos!

Juanito Ortega Guzmán

student•

Hola Lucio, gracias por tu respuesta... pasa que yo no instalé desde el blueprint porque como ya vengo del otro curso, solo seguí en el mismo despliegue. Y el tema de las imágenes cambia los formatos, tú estás usando png y yo desde los otros cursos venía con SVG, pero bueno... estoy cambiando los formatos. Gracias por el repo.

Alex Monroy

student•

npx install ios

David Rangel

student•

Como recomendación, al crear sus archivos pueden hacer la distinción entre los archivos con terminación .js y los .jsx

Los .js pueden ser para pura lógica y los .jsx para renderizar componentes o pruebas unitarias. Esta nomenclatura también le puede dar más claridad a otros devs de qué puede contener el archivo (independientemente de tener un nombre muy descriptivo).

Aplica lo mismo para archivos .ts y .tsx

David Rangel

student••

La documentación:

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context

npx pod-install ios

@Override
protected void onCreate(Bundle savedInstanceState){
  super.onCreate(null)
}

npm install @react-navigation/native-stack

Jorge Luis Paiva Huamán

student•

Estoy cogiendo el repo que indica lucio y tengo errores al correr el run-android.

Por favor quien si le haya compilado, por favor retornar su log: En mi caso: $ npx react-native info Quizá sea por el "Not Found" en Android SDK ??

info Fetching system and libraries information... System: OS: Windows 10 10.0.22621 CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics Memory: 4.61 GB / 15.33 GB Binaries: Node: 16.20.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled

Aprende a crear la navegación de tu app

Presentación

Bienvenida y presentación

Preparando el proyecto

Análisis del proyecto y conexión con la API de WooCommerce

¿Cómo puedo comenzar un proyecto con React Native?

Creando tu app

Planifica y crea el estado global de tu app

Crea la pantalla de productos

Crea la vista de productos en la pantalla principal

Aprende a crear la navegación de tu app

Crea la pantalla de detalles de productos

¿Cómo agregar el carrito a tu app?

Crea la vista de productos de tu carrito

Implementa cambios visuales basados en el carrito

Comprende cómo funcionan los payment gateways para tu app

Crea la pantalla de checkout

Guarda los pedidos de tu app

Conclusiones

¿Por dónde puedes seguir tu ruta?