Universidad Tecnológica de Panamá

Facultad de Ingeniería de Sistemas

Computacionales
Licenciatura en Ingeniería de Sistemas y Computación

Curso:
Herramientas de Programación Aplicada IV

Investigación:
React Native

Estudiantes:
Avendaño, José
8-905-1113

Facilitador: Juan Zamora

Grupo:
1IL-143

Segundo Semestre
Sede Panamá, 27 de octubre del 2019
Investigación

Sobre el framework asignado, investigue lo siguiente:

1. ¿Defina su lenguaje o framework?

React Native es un framework que te permite construir aplicaciones móviles

utilizando solamente JavaScript y React. Utiliza el mismo diseño que React.js,
permitiéndote usar elementos de interfaz de usuario móvil. No es para construir una
‘aplicación móvil web’, una ‘aplicación de HTML5’ o una ‘aplicación híbrida’, sino
una aplicación móvil real que es indistinguible de otra aplicación que usa construida
en un lenguaje nativo. React Native utiliza los mismos bloques fundamentales de
interfaz de usuario que las aplicaciones normales de iOS y Android.
A pesar de que React.js y React Native usen la misma estructura de código, no
sirven para lo mismo. React.js es utilizado para hacer páginas web y trabaja con
elementos del virtual DOM, mientras que por el otro lado React Native utiliza
elementos nativos de interfaz de usuario de Android y iOS para crear aplicaciones
para ambas plataformas.

React Native usa el mismo paradigma fundamental de construcción de bloques de

UI (componentes visuales con los que interacciona el usuario) que las aplicaciones
nativas reales de Android e iOS, pero gestiona la interacción entre los mismos
utilizando las capacidades de JavaScript y React.

2. Realice una pequeña reseña histórica sobre el origen de su framework.

a. Mencione quien lo creo
React fue creada por Jordan Walke, un ingeniero de software en Facebook,
inspirado por los problemas que tenía la compañía con el mantenimiento del código
de los anuncios dentro de su plataforma. Enfocado en la experiencia del usuario y
la eficiencia para sus programadores, influenciado por XHP (un marco de
componentes de HTML para PHP), nace el prototipo ReactJS.
b. Mencione la manera en que surge
Enero 28-29, 2015: Se publica la primera versión de React Native
Marzo 2015: React Native es público y de libre acceso para iOS, y está disponible
en Github.
Septiembre 2015: La primera versión de React Native para Android es publicada.

3. ¿Cuál es el elemento principal de su framework? Además, mencione sus otros

elementos

React Native proporciona una serie de componentes integrados. A continuación, se

muestran sus componentes y APIs:

Componentes Basicos
View
El componente más fundamental para construir una IU Viewes un contenedor que
admita el diseño con flexbox , style , algunos Handling Touches y controles de
accesibilidad . View se correlaciona directamente con la vista nativa equivalente en
cualquier plataforma donde se está ejecutando React Native, ya sea una UIView,
<div>, android.view, etc.

View está diseñado para estar anidado dentro de otros view y puede tener de 0 a
muchos hijos de cualquier tipo. Los View están diseñados para usarse con
StyleSheet por temas de claridad y rendimiento, aunque también se admiten estilos
en línea.

Text
Es un componente React para mostrar texto. Text admite anidación, diseño y
handling touch.
Image
Es un componente React para mostrar diferentes tipos de imágenes, incluidas
imágenes de red, recursos estáticos, imágenes locales temporales e imágenes del
disco local, como el de la cámara.
Este ejemplo muestra la obtención y la visualización de una imagen del
almacenamiento local, así como una de la red e incluso de los datos proporcionados
en el 'data:' esquema uri.

TextInput
Un componente fundamental para ingresar texto en la aplicación a través de un
teclado. Los accesorios proporcionan la capacidad de configuración para varias
funciones, como la corrección automática, el uso de mayúsculas, el texto de
marcador de posición y diferentes tipos de teclado, como un teclado numérico.

ScrollView
Componente que envuelve la plataforma ScrollView al tiempo que proporciona
integración con el sistema de "responder" de bloqueo táctil.
Tenga en cuenta que ScrollViews debe tener una altura limitada para poder
funcionar, ya que contienen elementos secundarios de altura ilimitada en un
contenedor limitado (a través de una interacción de desplazamiento).

StyleSheet
Una StyleSheet es una abstracción similar a CSS StyleSheets.

Interfaz de Usuario
Button
Un componente de botón básico que debería funcionar bien en cualquier plataforma.
Admite un nivel mínimo de personalización.
Picker
Representa el componente selector nativo en iOS y Android.

Switch
Representa una entrada booleana. Este es un componente controlado que requiere
una onValueChangedevolución de llamada que actualiza el valueaccesorio para
que el componente refleje las acciones del usuario. Si el valueaccesorio no se
actualiza, el componente continuará renderizando el valueaccesorio suministrado
en lugar del resultado esperado de cualquier acción del usuario.

List Views
FlatList
Una interfaz de alto rendimiento para renderizar listas básicas y planas, que admite
las funciones más útiles:
 Completamente multiplataforma.
 Modo horizontal opcional.
 Visibilidad configurable devoluciones de llamada.
 Soporte de encabezado.
 Soporte de pie de página.
 Separador de apoyo.
 Tire para actualizar.
 Desplazamiento de carga.
 Soporte ScrollToIndex.
 Soporte de múltiples columnas.

SectionList
Una interfaz de alto rendimiento para renderizar listas seccionadas, que admite las
funciones más útiles:
 Completamente multiplataforma.
 Visibilidad configurable devoluciones de llamada.
 Soporte de encabezado de lista.
  Lista de soporte de pie de página.
 Elemento separador de apoyo.
 Soporte de encabezado de sección.
 Soporte separador de secciones.
 Datos heterogéneos y soporte de representación de elementos.
 Tire para actualizar.
 Desplazamiento de carga.

Tiene también componentes para Android y iOS con sus respectivos APIs.

Android
BackHandler
Detecta pulsaciones de botones de hardware para navegación hacia atrás.

DatePickerAndroid
Abre el cuadro de diálogo estándar de selección de fecha de Android.

DatePickerAndroid se ha fusionado con DatePickerIOS y TimePickerAndroiden un

único componente llamado DateTimePicker y se quitará en una versión futura.

DrawerLayoutAndroid
Componente React que envuelve la plataforma DrawerLayout(solo Android). El
Drawer (que se usa generalmente para la navegación) se representa con
renderNavigationView y los hijos directos son la vista principal (donde va su
contenido). Inicialmente, la vista de navegación no es visible en la pantalla, pero
puede extraerse desde el lado de la ventana especificada por el drawerPosition y
su ancho puede establecerse mediante el drawerWidth.

PermissionsAndroid
proporciona acceso al nuevo modelo de permisos de Android M. Los llamados
permisos "normales" se otorgan de manera predeterminada cuando la aplicación se
instala siempre que aparezcan AndroidManifest.xml. Sin embargo, los permisos
"peligrosos" requieren un mensaje de diálogo.

ProgressBarAndroid
Se usa para indicar que la aplicación se está cargando o que hay alguna actividad
en la aplicación.

TimePickerAndroid
Abre el cuadro de diálogo estándar de selección de hora de Android.
TimePickerAndroidse ha fusionado con DatePickerIOSy DatePickerAndroiden un
único componente llamado DateTimePicker y se quitará en una versión futura.

ToastAndroid
Esto expone el módulo nativo ToastAndroid como un módulo JS. Esto tiene una
función 'show' que toma los siguientes parámetros:
1. Mensaje de cadena: una cadena con el texto para brindar
2. int duración: la duración del brindis. Puede ser ToastAndroid.SHORT o
ToastAndroid.LONG
También hay una función showWithGravitypara especificar la gravedad del
diseño. Puede ser ToastAndroid.TOP, ToastAndroid.BOTTOM,
ToastAndroid.CENTER.
La función 'showWithGravityAndOffset' agrega la capacidad de especificar el
desplazamiento Estos valores de desplazamiento se traducirán en píxeles.

ToolbarAndroid
Componente React que envuelve el Toolbarwidget solo para Android. Una barra de
herramientas puede mostrar un logotipo, un icono de navegación (por ejemplo,
menú de hamburguesas), un título y subtítulo y una lista de acciones. El título y los
subtítulos se expanden para que el logotipo y los iconos de navegación se muestren
a la izquierda, el título y los subtítulos en el medio y las acciones a la derecha.
iOS
ActionSheetIOS
Mostrar una hoja de acción de iOS. El objeto options debe contener uno o más de
los siguientes elementos:
 options (conjunto de cadenas): una lista de títulos de botones (obligatorio)
 cancelButtonIndex (int) - índice del botón cancelar en options
 destructiveButtonIndex (int) - índice del botón destructivo en options
 title (cadena) - un título para mostrar arriba de la hoja de acción
 message (cadena) - un mensaje para mostrar debajo del título
 anchor (número): el nodo al que debe anclarse la hoja de acción (utilizada
para iPad)
 tintColor(cadena): el color utilizado para los títulos de botones no destructivos
La función 'callback' toma un parámetro, el índice basado en cero del elemento
seleccionado.

AlertIOS
Esta obsoleto, el componente se ha trasladado a Alert el cual inicia un cuadro de
diálogo de alerta con el título y el mensaje especificados.
Opcionalmente, proporcione una lista de botones. Al tocar cualquier botón se
activará la devolución de llamada de onPress respectiva y se descartará la alerta.
Por defecto, el único botón será un botón 'Aceptar'.
Esta es una API que funciona tanto en iOS como en Android y puede mostrar alertas
estáticas. Para mostrar una alerta que solicite al usuario que ingrese cierta
información, consulte AlertIOS; ingresar texto en una alerta es común solo en iOS.

DatePickerIOS
Se usa DatePickerIOSpara representar un selector de fecha / hora (selector) en iOS.
Este es un componente controlado, por lo que debe conectarse a la onDateChange
callback y actualizar el date para que el componente se actualice, de lo contrario, el
cambio del usuario se revertirá inmediatamente para reflejar props.date como la
fuente de la verdad.
DatePickerIOS se ha fusionado con TimePickerAndroid y DatePickerAndroid en un
único componente llamado DateTimePicker y se quitará en una versión futura.

ProgressViewIOS
Se utiliza ProgressViewIOS para representar un UIProgressView en iOS.

Otros
ActivityIndicator
Muestra un indicador circular de carga.

Alert
Lanza un dialogo de alerta con un titulo y mensaje especifico.

Animated
Una librería que permite crear animaciones fáciles, fluidas y poderosas.
Clipboard
Proporciona una interfaz para establecer y obtener contenido desde el portapapeles
de iOS y Android.

Dimensions
Proporciona una interfaz para obtener las dimensiones del dispositivo.

KeyboardAvoidingView
Proporciona una vista que se aleja del teclado virtual automáticamente.

Linking
Proporciona una interfaz general para interactuar con enlaces de aplicaciones
entrantes y salientes.
Modal
Proporciona una manera simple de presentar contenido sobre una vista adjunta.

PixelRatio
Proporciona acceso a la densidad de pixeles del dispositivo.

RefreshControl
Este componente se utiliza dentro de una función ScrollView para agregar
extracción para actualizar.

StatusBar
Componente para controlar la barra de estado de la aplicación.

4. Mencione las ventajas y desventajas sobre el mismo.

Ventajas
1. cubre iOS y Android
2. Aplicaciones nativas robustas
3. Desarrollo rápido y fluido
4. Reusabilidad de los componentes
5. Desarrollo más eficiente
6. Compatibilidad con plugins de terceros y menor uso de memoria
7. Rápida corrección de errores
8. Constante crecimiento

Desventajas
1. En primer lugar, encontraron un problema de inmadurez de la plataforma,
esto lo describieron argumentando que ocurrían ciertos problemas que, en el
desarrollo nativo, eran triviales, pero que en React Native se transformaban
en un problema mayor.
2. Otro de los principales problemas con los que tuvieron que lidiar son
los crashes, que básicamente significa que la aplicación se cerró de manera
 inesperada. La complicación que existió con este ítem fue que
estos crashes eran por decirlo “extraños” e irreproducibles, es decir, no era
sencilla su detección y por consecuencia, su corrección.
3. Para finalizar, otro de los problemas técnico que tuvieron con esta tecnología,
fue el de mostrar largas listas, debido a que como la plataforma aún sigue
siendo inmadura, no provee la misma flexibilidad y capacidad que ofrece el
desarrollo nativo. Asimismo, se pueden observar problemas
de performance de la aplicación y la aparición de problemas inesperados,
esto aseverado por AirBnb.

5. Mencione cuál es su versión más actual y cuál es su versión más estable.

La versión más actual es MASTER y la más estable es 0,61.

6. Confeccione un diagrama secuencial (paso a paso) donde explique cómo puedo

utilizar el framework. Debe mencionar:
a. Herramientas,
b. Componentes,
c. Librerías,
d. Otros.
7. Realice un cuadro analógico, donde defina cada uno de los controles con su
análogo de lenguaje Nativo.
Controles y componentes comúnmente usados
styled-components le permite escribir código CSS para el estilo de
sus componentes reaccionan.
react-native-calendar muestra un calendario que los usuarios pueden
interactuar con.
react-native-datepicker para escoger las fechas y horarios.
react-native-progress para crear barras de progreso y spinners.
react-native-spinkit una colección de indicadores de carga.
Iconos Vector permite utilizar los iconos de tus fuentes de fuente
icono favorito como fuente impresionante y los
iconos de Material.
react-native-swiper convierte una colección de imágenes o
contenedores en pasar los componentes.
react-native-scrollable-tab- pestañas de navegación que puede deslizar
view entre.
react-native-lightbox para ver imágenes en pantalla completa pop-
overs.
react-native-maps permite integrar Google Maps en sus
aplicaciones. No todas las funciones disponibles
en la API de Google Maps están disponibles, pero
la funcionalidad que proporciona debe ser
suficiente en la mayoría de los casos.
SGListView una implementación de memoria respetuosa de
componente incorporado de reaccionar nativo del
ListView. Si usted necesita mostrar listas
enormes en su aplicación, utilícelo en lugar de
ListView.
Formik hace tratar con formas nativas reaccionan menos
dolorosa. Permite obtener valores dentro y fuera
del estado de forma, validar sus formularios y
controlar su presentación.
react-native-i18n para implementar la internacionalización de sus
aplicaciones.
react-native-push- implementa notificaciones push locales y
notification remotos.
InstantSearch una colección de componentes para la aplicación
de búsqueda.
 react-native-fs le permite acceder a sistema de archivos
nativo del dispositivo.
react-native-camera un componente de la cámara que le permite
tomar fotos y vídeos de tu app.
react-native-video para reproducción de vídeos desde su
sistema de archivos o desde una URL.
react-native-sqlite-storage para almacenar y manipular datos de una
base de datos SQLite.
react-native-store una tienda de clave y valor basado en
AsyncStorage.
react-native-webrtc para implementar WebRTC.

8. Entre su grupo, confeccionen un listado de ventajas o valores agregados que

tiene su framework y defienda porque debe ser tomado en consideración como
prioridad para el desarrollo de un proyecto de aplicación móvil.

Ventajas
 Tiene una curva de aprendizaje relativamente corta en comparación con el
aprendizaje que requieren Objective-C y Java.
 Proporciona una mejor experiencia de desarrollador.
 La depuración móvil es relativamente fácil debido a que se ha logrado llevar
la depuración web al mundo móvil.
 No se necesita volver a compilar una aplicación después de cada cambio de
código menor, sólo con guardar los cambios realizados se puede recargar en
vivo la aplicación.
 Utiliza Flexbox (modelo de diseño web CSS3) para mejorar los estilos de las
aplicaciones.
 Entre 80% y 90% del código se puede reutilizar entre iOS y Android.
  Tiene acceso directo a todas la APIs 7 y views nativas 8 que ofrecen los
sistemas operativos nativos

Desventajas
 No es posible visualizar ningún objeto 3D.
 No se recomienda para el desarrollo de videojuegos.
 El entorno de trabajo es costoso de instalar en cuestión de tiempo.
 Poca información a la hora de resolver problemas.
 Si se desea desarrollar aplicaciones para iOS debe de ser en un equipo que
corra el sistema operativo del mismo.

Trabajar con JavaScript tiene la ventaja de que la curva de aprendizaje es rápida y

si se tienen conocimientos previos de este lenguaje de programación el tiempo se
acorta mucho más. Por otra parte, el trabajar con dos sistemas operativos muy
diferentes entre sí (Android y iOS), que corren las aplicaciones de forma distinta,
con diferente desempeño y con una interfaz única en cada sistema, hacía que en
un principio fuera difícil y costoso el desarrollar una aplicación para ambas
plataformas. Por lo tanto, pensar que se tenía que programar dos veces la misma
aplicación para cada una de las plataformas definitivamente era una gran
desventaja. Hoy en día eso ya forma parte del pasado, sin lugar a duda React Native
es el framework del momento, la mejor alternativa para aprender a desarrollar
aplicaciones móviles ya sea para Android o iOS.

9. Confeccione un ejemplo utilizando el framework asignado (Mínimo 3 pantallas,

sin incluir Login, Registro y Pantalla de Inicio).