Primeros pasos con react-native

Configuración para Mac

Instalando el administrador de paquetes Homebrew brew

Péguelo en un indicador de Terminal.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Instalando el IDE de Xcode

Descárguelo usando el enlace a continuación o encuéntrelo en Mac App Store

https://developer.apple.com/download/

NOTA: Si tiene Xcode-beta.app instalado junto con la versión de producción de Xcode.app, asegúrese de estar usando la versión de producción de la herramienta xcodebuild. Puedes configurarlo con:

sudo xcode-select -switch /Aplicaciones/Xcode.app/Contents/Developer/

Instalando entorno Android

  • Ir ir

*Si ha instalado XCode, Git ya está instalado; de lo contrario, ejecute lo siguiente

   brew install git

  • Último JDK

  • Estudio Android

    Choose a Custom installation

    Choose a Custom installation

    Choose both Performance and Android Virtual Device

    Choose both Performance and Android Virtual Device

    After installation, choose Configure -> SDK Manager from the Android Studio welcome window.

    choose Configure -> SDK Manager

    In the SDK Platforms window, choose Show Package Details and under Android 6.0 (Marshmallow), make sure that Google APIs, Intel x86 Atom System Image, Intel x86 Atom_64 System Image, and Google APIs Intel x86 Atom_64 System Image are checked.

    SDK Platforms window

    In the SDK Tools window, choose Show Package Details and under Android SDK Build Tools, make sure that Android SDK Build-Tools 23.0.1 is selected.

    SDK Tools window

  • Variable de entorno ANDROID_HOME

    Ensure the ANDROID_HOME environment variable points to your existing Android SDK. To do that, add this to your ~/.bashrc, ~/.bash_profile (or whatever your shell uses) and re-open your terminal:

    If you installed the SDK without Android Studio, then it may be something like: /usr/local/opt/android-sdk

    export ANDROID_HOME=~/Library/Android/sdk

Dependencias para Mac

Necesitará Xcode para iOS y Android Studio para Android, node.js, las herramientas de línea de comandos de React Native y Watchman.

Recomendamos instalar node y watchman a través de Homebrew.

brew install node
brew install watchman

Watchman es una herramienta de Facebook para observar cambios en el sistema de archivos. Se recomienda encarecidamente que lo instale para un mejor rendimiento. es opcional

Node viene con npm, que le permite instalar la interfaz de línea de comandos de React Native.

npm install -g react-native-cli

Si obtiene un error de permiso, intente con sudo:

sudo npm install -g react-native-cli.

Para iOS, la forma más fácil de instalar Xcode es a través de Mac App Store. Y para Android, descargue e instale Android Studio.

Si planea realizar cambios en el código Java, le recomendamos Gradle Daemon, que acelera la compilación.

Probando su instalación de React Native

Use las herramientas de línea de comandos de React Native para generar un nuevo proyecto de React Native llamado “AwesomeProject”, luego ejecute react-native run-ios dentro de la carpeta recién creada.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

Debería ver su nueva aplicación ejecutándose en el simulador de iOS en breve. react-native run-ios es solo una forma de ejecutar su aplicación; también puede ejecutarla directamente desde Xcode o Nuclide.

Modificando tu aplicación

Ahora que ha ejecutado con éxito la aplicación, vamos a modificarla.

  • Abra index.ios.js o index.android.js en el editor de texto de su elección y edite algunas líneas.
  • Presiona Comando⌘ + R en tu simulador de iOS para volver a cargar la aplicación y ver tu ¡cambio! ¡Eso es todo!

¡Felicidades! Ha ejecutado y modificado con éxito su primera aplicación React Native.

fuente: Introducción - React-Native

Configuración para Linux (Ubuntu)

1) Configurar Nodo.JS

Inicie la terminal y ejecute los siguientes comandos para instalar nodeJS: 

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

Si el comando de nodo no está disponible 

sudo ln -s /usr/bin/nodejs /usr/bin/node

Instalaciones alternativas de NodeJS: 

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

o

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

comprueba si tienes la versión actual 

node -v

Ejecute npm para instalar react-native 

sudo npm install -g react-native-cli

2) Configurar Java

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk

3) Configurar Android Studio:

Android SDK o Android Studio 

http://developer.android.com/sdk/index.html

Android SDK y ENV 

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

4) Configuración del emulador:

En la terminal ejecuta el comando

android

Seleccione “Plataformas SDK” desde SDK Manager y debería ver una marca de verificación azul junto a “Android 7.0 (Nougat)”. En caso de que no sea así, haga clic en la casilla de verificación y luego en “Aplicar”.

ingrese la descripción de la imagen aquí

5) Iniciar un proyecto

Ejemplo de inicio de aplicación 

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs: compruebe siempre si la versión en android/app/build.gradle es la misma que la de las herramientas de compilación descargadas en su SDK de Android 

android {
    compileSdkVersion XX
    buildToolsVersion "XX.X.X"
...

6) Ejecutar el proyecto

Abra Android AVD para configurar un Android virtual. Ejecute la línea de comando: 

android avd

Siga las instrucciones para crear un dispositivo virtual e iniciarlo

Abra otra terminal y ejecute las líneas de comando:

react-native run-android
react-native start

Configuración para Windows

Nota: No puede desarrollar aplicaciones nativas de reacción para iOS en Windows, solo aplicaciones de Android nativas de reacción.

Los documentos de configuración oficiales para react-native en Windows se pueden encontrar aquí. Si necesita más detalles, hay una guía detallada aquí.

Herramientas/Entorno -Windows 10

  • herramienta de línea de comandos (por ejemplo, Powershell o línea de comandos de Windows)
  • Chocolatey (pasos para configurar a través de PowerShell)
  • El JDK (versión 8) -Estudio de Android
  • Una máquina Intel con tecnología de virtualización habilitada para HAXM (opcional, solo necesaria si desea utilizar un emulador)

1) Configure su máquina para el desarrollo nativo de reacción

Inicie la línea de comando como administrador y ejecute los siguientes comandos:

choco install nodejs.install
choco install python2

Reinicie la línea de comando como administrador para que pueda ejecutar npm

npm install -g react-native-cli

Después de ejecutar el último comando, copie el directorio en el que se instaló react-native. Lo necesitará para el Paso 4. Intenté esto en dos computadoras en un caso, era: C:\Program Files (x86)\Nodist\v- x64\6.2.2. En el otro estaba: C:\Users\admin\AppData\Roaming\npm

2) Establezca sus variables de entorno

Aquí se puede encontrar una guía paso a paso con imágenes para esta sección.

Abra la ventana Variables de entorno navegando hasta:

[Clic derecho] Menú “Inicio” -> Sistema -> Configuración avanzada del sistema -> Variables de entorno

En la sección inferior, busque la variable del sistema “Ruta” y agregue la ubicación en la que se instaló react-native en el paso 1.

Si no ha agregado una variable de entorno ANDROID_HOME, también tendrá que hacerlo aquí. Mientras aún está en la ventana “Variables de entorno”, agregue una nueva variable del sistema con el nombre “ANDROID_HOME” y valore como la ruta a su SDK de Android.

Luego reinicie la línea de comando como administrador para que pueda ejecutar comandos nativos de reacción en ella.

3) Crea tu proyecto En la línea de comando, navegue hasta la carpeta en la que desea colocar su proyecto y ejecute el siguiente comando:

react-native init ProjectName

4) Ejecuta tu proyecto Inicie un emulador desde Android Studio Navegue al directorio raíz de su proyecto en la línea de comando y ejecútelo:

cd ProjectName
react-native run-android

Puede encontrarse con problemas de dependencia. Por ejemplo, puede haber un error que indique que no tiene la versión correcta de las herramientas de compilación. Para solucionar esto, deberá abrir [el administrador de sdk en Android Studio] 5 y descargar las herramientas de compilación desde allí.

¡Felicitaciones!

Para actualizar la interfaz de usuario, puede presionar la tecla r dos veces mientras está en el emulador y ejecuta la aplicación. Para ver las opciones de desarrollador, puede presionar ctrl + m.

Android - Botón Atrás de hardware →