react-native Tutorial
Empezando con react-native

Observaciones

Configuración para Mac

Instalación del gestor de paquetes Homebrew brew

Pega eso en un aviso de Terminal.

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

Instalación de Xcode IDE

Descárguelo utilizando el enlace a continuación o búsquelo 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 /Applications/Xcode.app/Contents/Developer/

Instalación del entorno Android

• Git git

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

  brew install git 
  

• Último JDK

• Android Studio

  Elija una instalación personalizada

  

  Elija tanto el rendimiento como el dispositivo virtual de Android

  

  Después de la instalación, elija Configurar -> Administrador de SDK en la ventana de bienvenida de Android Studio.

  

  En la ventana de Plataformas del SDK, elija Mostrar detalles del paquete y en Android 6.0 (Marshmallow), asegúrese de que las API de Google, la imagen del sistema Intel x86 Atom, la imagen del sistema Intel x86 Atom_64 y la API del sistema Intel x86 Atom_64 estén marcadas.

  

  En la ventana de Herramientas del SDK, elija Mostrar detalles del paquete y en Herramientas de compilación del SDK de Android, asegúrese de que la herramienta de construcción del SDK de Android 23.0.1 esté seleccionada.

  

• Variable de entorno ANDROID_HOME

  Asegúrese de que la variable de entorno ANDROID_HOME apunte a su SDK de Android existente. Para hacer eso, agregue esto a su ~ / .bashrc, ~ / .bash_profile (o lo que sea que use su shell) y vuelva a abrir su terminal:

  Si instaló el SDK sin Android Studio, entonces podría ser algo como: / 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 React Native y Watchman.

Recomendamos la instalación de node y watchman a través de Homebrew.

brew install node
brew install watchman

Watchman es una herramienta de Facebook para observar los cambios en el sistema de archivos. Es altamente recomendable que lo instale para un mejor rendimiento. Es opcional.

El nodo 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 la Mac App Store. Y para Android descargar e instalar Android Studio.

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

Probando su instalación nativa React

Use las herramientas de línea de comando React Native para generar un nuevo proyecto React Native llamado "AwesomeProject", luego ejecute run-io nativo reactivo 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.

Modificar tu aplicación

Ahora que has ejecutado exitosamente la aplicación, modifiquémosla.

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

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

_{fuente: Getting Started - React-Native}

Configuración para Windows

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

Los documentos de configuración oficiales para reaccion-native en windows se pueden encontrar aquí . Si necesitas más detalles hay una guía granular aquí .

Herramientas / Medio Ambiente

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

1) Configure su máquina para reaccionar al desarrollo nativo

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

choco install nodejs.install
choco install python2

Reinicie la línea de comandos 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ó reaccion-native. Lo necesitará para el Paso 4. Lo intenté en dos computadoras en un caso: C:\Program Files (x86)\Nodist\v-x64\6.2.2 . En el otro era: C:\Users\admin\AppData\Roaming\npm

2) Establezca sus variables de entorno

Puede encontrar una guía paso a paso con imágenes aquí para esta sección.

Abra la ventana Variables de entorno navegando a:

[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 donde se instaló react-native en el paso 1.

Si no ha agregado una variable de entorno ANDROID_HOME, también deberá hacerlo aquí. Mientras aún se encuentre 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 comandos como administrador para que pueda ejecutar comandos react-native en ella.

3) Cree su proyecto En la línea de comandos, navegue a la carpeta donde desea colocar su proyecto y ejecute el siguiente comando:

react-native init ProjectName

4) Ejecute su proyecto Inicie un emulador desde android studio Navegue hasta el directorio raíz de su proyecto en la línea de comandos y ejecútelo:

cd ProjectName
react-native run-android

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

Felicidades

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 puedes presionar ctrl + m .

Configuración para Linux (Ubuntu)

1) Setup Node.JS

Inicie el 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

Alternativas de instalaciones 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 

Ejecuta el npm para instalar el reactivo-nativo

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) Emulador de configuración:

En la terminal ejecuta el comando

android

Seleccione "Plataformas SDK" en el Administrador de SDK y debería ver una marca de verificación azul junto a "Android 7.0 (Nougat)". En caso de que no lo sea, haga clic en la casilla de verificación y luego en "Aplicar".

5) Iniciar un proyecto.

Ejemplo de inicio de aplicación

react-native init ReactNativeDemo && cd ReactNativeDemo

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

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

6) Ejecutar el proyecto

Abre Android AVD para configurar un androide virtual. Ejecutar la línea de comando:

android avd

Sigue las instrucciones para crear un dispositivo virtual e iniciarlo.

Abre otro terminal y ejecuta las líneas de comando:

react-native run-android
react-native start