Curso de React Native CLI

Curso de React Native CLI

Alejandro Sanabria

Alejandro Sanabria

Estructura de un proyecto en react native

4/22
Recursos

Aportes 39

Preguntas 10

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Hola en que se diferencia usar solo react native a usar expo-cli pregunto porque en otros cursos que he visto se usa expo y en la documentaci贸n de react usan expo.

No usen expo, realmente es imposible de mantener a lo largo del tiempo. Ninguna aplicacion en produccion sale con Expo. Quiz谩s sirva para aprender al inicio, pero no lo recomiendo para nada.

Aqui les dejo el comando para ejecutar VsCODE des de Mac.

code () { VSCODE_CWD="$PWD" open -n -b 鈥渃om.microsoft.VSCode鈥 --args $* ;}

copian este comando en la consola y luego escriben :
code
automaticamente se abre VisualStudio.

Al realizar la instalaci貌n en un mac con Big Sour y chip m1, falla el cocoapods por defecto para solucionarlo realice los siguientes pasos:

  1. Instale el cocoapods usando brew, ejecutando el comando:
brew install cocoapods
  1. Ejecute este comando con permisos de sudo:
sudo arch -x86_64 gem install ffi
  1. Volvi a installar pod con la version adecuada:
sudo arch -x86_64 gem install ffi

inentendible por qu茅 no se utilizo expo鈥 hacerlo de esta forma solo complica las cosas cuando estas aprendiendo

Quiero seguir el curso pero estoy usando GNU/Linux 驴como hago?

Yo en la Mac. tenia un problema que me dec铆a que not Xenia instalado pods en la carpeta iOS y al intentarlo me mencionaba algo de gems, si tienen un problema similar yo lo pude resolver con las instrucciones que vienen aqu铆, donde dice que hay que checar primero la version e ruby https://stackoverflow.com/questions/20939568/error-error-installing-cocoapods-error-failed-to-build-gem-native-extension

Si lo est谩s corriendo en un dispositivo con M1 el comando

npx react-native init appName

falla para la versi贸n 0.69.0 por lo que tenemos que descargar una versi贸n anterior

npx react-native init appName --version 0.68.2

2da vez por ac谩 pero ahora haciendo mi proyecto 馃槂

Llevo desde el 2016 conociendo Swift y Pods (cocoapods) existe desde antes->> Mira este video de Google donde hacen una introducci贸n de cocoa Pods (2015) https://www.youtube.com/watch?v=iEAjvNRdZa0

驴Por que cuando inicio mi proyecto con npx react-native init me salen 7 errores minimos y muchas de las dependecias dicen que son obsoletas?

posteriormente hago un npm audit fix --force y ahora se convierten a 55 errores, la mayoria altos y me arroja mas dependencias obsoletas

Hay algun otro comando que sea para react-native-cli sin que tenga estos problemas de vulnerabilidad?

npx react-native init nombreProyecto

exelente explicacion

Estoy listo para adentrarme a este mundo movil, despues de unos 3 years trabajando en la web con React y Node.

que archivos contiene

Para algunos se les puede llegar mandar este error al momento de usar 鈥渘px react-native run-android鈥:

A problem was found with the configuration of task 鈥:app:processDebugManifest鈥 (type 鈥楶rocessMultiApkApplicationManifest鈥).
File 鈥<aqui esta la ruta del proyecto>鈥 for property 鈥榤ainMergedManifest鈥 does not exist.

https://www.youtube.com/watch?v=U420dx6C60I
en ese video se da la soluci贸n y el error al parecer es un bug

Hola buenas compis estoy iniciando react-native y despu茅s de seguir todos los pasos del cap铆tulo 3, me da el siguiente error en la terminar:

              Welcome to React Native!                
             Learn once, write anywhere               

鉁 Downloading template
鉁 Copying template
鉁 Processing template
鉁 Installing CocoaPods dependencies (this may take a few minutes)
鉁 Installing CocoaPods dependencies (this may take a few minutes)
error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: 鈥渃d ./cryptoTracker/ios && pod install鈥.
CocoaPods documentation: https://cocoapods.org/
[email protected] dev % cd ./cryptoTracker/ios && pod install
Analyzing dependencies
Fetching podspec for DoubleConversion from ../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec
Fetching podspec for Folly from ../node_modules/react-native/third-party-podspecs/Folly.podspec
Fetching podspec for glog from ../node_modules/react-native/third-party-podspecs/glog.podspec
Downloading dependencies
Installing CocoaAsyncSocket (7.6.5)
Installing CocoaLibEvent (1.0.0)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.63.4)
Installing FBReactNativeSpec (0.63.4)
Installing Flipper (0.54.0)
Installing Flipper-DoubleConversion (1.1.7)
Installing Flipper-Folly (2.3.0)
Installing Flipper-Glog (0.3.6)
[!] /bin/bash -c
set -e
#!/bin/bash

Copyright 漏 Facebook, Inc. and its affiliates.

This source code is licensed under the MIT license found in the

LICENSE file in the root directory of this source tree.

set -e

PLATFORM_NAME="${PLATFORM_NAME:-iphoneos}鈥
CURRENT_ARCH=鈥${CURRENT_ARCH}"

if [ -z 鈥$CURRENT_ARCH鈥 ] || [ 鈥$CURRENT_ARCH鈥 == 鈥渦ndefined_arch鈥 ]; then
# Xcode 10 beta sets CURRENT_ARCH to 鈥渦ndefined_arch鈥, this leads to incorrect linker arg.
# it鈥檚 better to rely on platform name as fallback because architecture differs between simulator and device

if [[ "$PLATFORM_NAME" == *"simulator"* ]]; then
    CURRENT_ARCH="x86_64"
else
    CURRENT_ARCH="armv7"
fi

fi

export CC="$(xcrun -find -sdk $PLATFORM_NAME cc) -arch $CURRENT_ARCH -isysroot $(xcrun -sdk $PLATFORM_NAME --show-sdk-path)鈥
export CXX=鈥$CC"

Remove automake symlink if it exists

if [ -h 鈥渢est-driver鈥 ]; then
rm test-driver
fi

./configure --host arm-apple-darwin

Fix build for tvOS

cat << EOF >> src/config.h
/* Add in so we have Apple Target Conditionals /
#ifdef APPLE
#include <TargetConditionals.h>
#include <Availability.h>
#endif
/
Special configuration for AppleTVOS /
#if TARGET_OS_TV
#undef HAVE_SYSCALL_H
#undef HAVE_SYS_SYSCALL_H
#undef OS_MACOSX
#endif
/
Special configuration for ucontext */
#undef HAVE_UCONTEXT_H
#undef PC_FROM_UCONTEXT
#if defined(x86_64)
#define PC_FROM_UCONTEXT uc_mcontext->__ss.__rip
#elif defined(i386)
#define PC_FROM_UCONTEXT uc_mcontext->__ss.__eip
#endif
EOF

Prepare exported header include

EXPORTED_INCLUDE_DIR="exported/glog"
mkdir -p exported/glog
cp -f src/glog/log_severity.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/logging.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/raw_logging.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/stl_logging.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/vlog_is_on.h 鈥$EXPORTED_INCLUDE_DIR/鈥

checking for a BSD-compatible install鈥 /usr/bin/install -c
checking whether build environment is sane鈥 yes
checking for arm-apple-darwin-strip鈥 no
checking for strip鈥 strip
checking for a thread-safe mkdir -p鈥 ./install-sh -c -d
checking for gawk鈥 no
checking for mawk鈥 no
checking for nawk鈥 no
checking for awk鈥 awk
checking whether make sets $(MAKE)鈥 yes
checking whether make supports nested variables鈥 yes
checking for arm-apple-darwin-gcc鈥 /Library/Developer/CommandLineTools/usr/bin/cc -arch armv7 -isysroot
checking whether the C compiler works鈥 no
xcrun: error: SDK 鈥渋phoneos鈥 cannot be located
xcrun: error: SDK 鈥渋phoneos鈥 cannot be located
xcrun: error: SDK 鈥渋phoneos鈥 cannot be located
xcrun: error: unable to lookup item 鈥楶ath鈥 in SDK 鈥榠phoneos鈥
/Users/franciscodeborjapetitme/Library/Caches/CocoaPods/Pods/Release/Flipper-Glog/0.3.6-1dfd6/missing: Unknown --is-lightweight' option Try/Users/franciscodeborjapetitme/Library/Caches/CocoaPods/Pods/Release/Flipper-Glog/0.3.6-1dfd6/missing --help鈥 for more information
configure: WARNING: 鈥榤issing鈥 script is too old or missing
configure: error: in /Users/franciscodeborjapetitme/Library/Caches/CocoaPods/Pods/Release/Flipper-Glog/0.3.6-1dfd6': configure: error: C compiler cannot create executables Seeconfig.log鈥 for more details

la verdad que no entiendo bien lo que ha sucedido

si alguien me puede ayudar seria un gran placer o si alguien lo sucedi贸 algo similar

Se puede ejecutar la app en un dispositivo, directamente cuando se ejecut茅 el comando npx react-native run-android ?

mi android le coloqu茅 modo depuraci贸n, pero siempre que ejecuto el comando anterior me dice que debo iniciar el emulador, o conectar un dispositivo.

Qu茅 configuraci贸n debo hacer?

Muchas gracias.

Cordial Saludo desde Barranquilla, Colombia - barrio la chinita.

En windows me sale diferente

馃憦馃憦馃憦馃憦馃憦

Estructura del proyecto Android

Clase que administra los paquetes en Android

Permisos y configuraci贸n de Android (AndroidManifest.xml)

Gestor de dependencias para Android

Existir谩 alg煤n log4React ? log para este framework

que pasa si quiero usar cartage para las dependencias de ios?? osea da igual pero me da curiosidad ese punto

Estructura del proyecto iOS

Archivo principal para iOS

Configuraci贸n de la app para iOS

Gestor de dependencias para el proyecto en iOS

Archivo de la aplicaci贸n React Native

Librer铆as que se ejecutan antes de que la aplicaci贸n inicie

El "install code (01:43) veo que en Windows no es necesario.
Porque ya sea por PowerShell o CMD el comando 鈥渃ode .鈥 si reconoce 馃槂

驴Es posible desarrollar react native puro desde ubuntu , siempre lo he hecho con Expo - Cli?

Por que se olvida de linux teacher 馃槙

Error en MacBooks con M1:

### Error
LoadError - dlopen(/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.0/lib/ffi_c.bundle, 0x0009): missing compatible arch in /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.0/lib/ffi_c.bundle - /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.0/lib/ffi_c.bundle

Soluci贸n:
Entrar a la carpeta de la Aplicaci贸n/ios:

cd [nombreDeTuAplicacion]/ios

y correr los comandos:

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

Alguien sabe porque Freddy dijo en un live que reactiv贸 nativa no era buena opci贸n para desarrollar apps 驴?

ok problema resuelto ejejejej estaba accediendo mal al archivo jejeje que necio de mi.

La diferencia entre expo-cli y solo react-native es su emulaci贸n desde diferentes plataformas en la web aparte de los emuladores en conjunci贸n con android studio y smartphone fisico por eso creo que expo-cli en eso es mejor