Aprende a crear la navegación de tu app

José Eduardo Rendón Valencia

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

Hace 5 años

¿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

Profesor

Hace 5 años

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

Hace 5 años

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

Hace 5 años

npx install ios

David Rangel

Hace un año

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

Hace un año•editado

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 Paiva

Hace 3 años

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

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,
  },
});

¿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

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!

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.

npx install ios

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

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

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

Progreso del curso

Presentación

Preparando el proyecto

Creando tu app

Conclusiones