Un esbozo muy aproximado de un navegador web móvil creado con react-native (un "omnibar" y un WebView ). El navegador interactúa con una API de puerta de enlace (que eventualmente también podría instalar en GitHub) que actúa como transporte para protocolos descentralizados (actualmente no compatibles) ( DAT , actualmente).
const express = require ( 'express' )
const app = express ( )
const port = 3000
const host = 'localhost'
const startUpMsg = `proxy listening on port ${ port } !`
const serveIndex = require ( 'serve-index' )
const Dat = require ( 'dat-node' )
const path = require ( 'path' )
app . use ( express . static ( __dirname + '/dats' ) )
app . use ( '/' , serveIndex ( __dirname + '/dats' ) )
app . use ( function ( req , res , next ) {
const orig = req . url
const { referer , host } = req . headers
if ( referer && / ^(/) / . test ( req . url ) ) {
// account for relative asset paths
const folder = referer . replace ( `http:// ${ host } /` , '' )
res . redirect ( `/ ${ folder . replace ( '/' , '' ) } ${ req . url } ` )
}
next ( )
} )
app . get ( '/dat/:key' , ( req , res ) => {
const { key } = req . params
Dat ( `./dats/ ${ key } ` , {
key : key
} , function ( err , dat ) {
if ( err ) throw err
dat . joinNetwork ( { } , _ => {
res . json ( {
url : `http:// ${ host } : ${ port } / ${ key } `
} )
} )
} )
} )
app . listen ( port , _ => console . log ( startUpMsg ) )Este proyecto se inició con la aplicación Create React Native.
A continuación encontrará información sobre cómo realizar tareas comunes. La versión más reciente de esta guía está disponible aquí.
Solo debería necesitar actualizar la instalación global de create-react-native-app muy raramente, idealmente nunca.
Actualizar la dependencia de react-native-scripts de su aplicación debería ser tan simple como aumentar el número de versión en package.json y reinstalar las dependencias de su proyecto.
La actualización a una nueva versión de React Native requiere actualizar las versiones de los paquetes react-native , react y expo , y configurar la sdkVersion correcta en app.json . Consulte la guía de versiones para obtener información actualizada sobre la compatibilidad de las versiones del paquete.
Si se instaló Yarn cuando se inicializó el proyecto, entonces las dependencias se habrán instalado a través de Yarn y probablemente también debería usarlo para ejecutar estos comandos. A diferencia de la instalación de dependencias, la sintaxis de ejecución de comandos es idéntica para Yarn y NPM al momento de escribir este artículo.
npm startEjecuta tu aplicación en modo de desarrollo.
Ábrelo en la aplicación Expo de tu teléfono para verlo. Se recargará si guarda las ediciones de sus archivos y verá errores de compilación y registros en la terminal.
A veces es posible que necesites restablecer o borrar el caché del empaquetador React Native. Para hacerlo, puede pasar el indicador --reset-cache al script de inicio:
npm start --reset-cache
# or
yarn start --reset-cache
npm testEjecuta el corredor de pruebas Jest en tus pruebas.
npm run ios Como npm start , pero también intenta abrir tu aplicación en el Simulador de iOS si estás en una Mac y la tienes instalada.
npm run android Como npm start , pero también intenta abrir su aplicación en un dispositivo o emulador Android conectado. Requiere una instalación de herramientas de compilación de Android (consulte los documentos de React Native para una configuración detallada). También recomendamos instalar Genymotion como su emulador de Android. Una vez que haya terminado de configurar el entorno de compilación nativo, hay dos opciones para hacer que la copia correcta de adb esté disponible para Create React Native App:
adb de Android StudioSettings -> ADB . Seleccione "Usar herramientas personalizadas del SDK de Android" y actualice con su directorio del SDK de Android. adb de Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/ .npm run ejectEsto iniciará el proceso de "expulsión" de los scripts de compilación de la aplicación Create React Native. Se le harán un par de preguntas sobre cómo le gustaría construir su proyecto.
Advertencia: Ejecutar expulsar es una acción permanente (aparte del sistema de control de versiones que utilice). Una aplicación expulsada requerirá que tengas configurado un entorno Xcode y/o Android Studio.
Puede editar app.json para incluir claves de configuración debajo de la clave expo .
Para cambiar el nombre para mostrar de su aplicación, configure la clave expo.name en app.json en una cadena adecuada.
Para configurar el ícono de una aplicación, configure la clave expo.icon en app.json para que sea una ruta local o una URL. Se recomienda utilizar un archivo png de 512x512 con transparencia.
Este proyecto está configurado para utilizar jest para las pruebas. Puede configurar cualquier estrategia de prueba que desee, pero funciona de inmediato. Cree archivos de prueba en directorios llamados __tests__ o con la extensión .test para cargar los archivos mediante broma. Consulte el proyecto de plantilla para ver una prueba de ejemplo. La documentación de Jest también es un recurso maravilloso, al igual que el tutorial de prueba de React Native.
Puede configurar parte del comportamiento de Create React Native App utilizando variables de entorno.
Al iniciar su proyecto, verá algo como esto en la URL de su proyecto:
exp://192.168.0.2:19000
El "manifiesto" en esa URL le dice a la aplicación Expo cómo recuperar y cargar el paquete JavaScript de su aplicación, por lo que incluso si lo carga en la aplicación a través de una URL como exp://localhost:19000 , la aplicación cliente Expo seguirá intentando recupere su aplicación en la dirección IP que proporciona el script de inicio.
En algunos casos, esto no es lo ideal. Este podría ser el caso si necesita ejecutar su proyecto dentro de una máquina virtual y tiene que acceder al empaquetador a través de una dirección IP diferente a la que imprime de forma predeterminada. Para anular la dirección IP o el nombre de host detectado por Create React Native App, puede especificar su propio nombre de host a través de la variable de entorno REACT_NATIVE_PACKAGER_HOSTNAME :
Mac y Linux:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Ventanas:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
El ejemplo anterior haría que el servidor de desarrollo escuchara en exp://my-custom-ip-address-or-hostname:19000 .
La aplicación Create React Native hace mucho trabajo para que la configuración y el desarrollo de la aplicación sean simples y directos, pero es muy difícil hacer lo mismo para implementarla en la App Store de Apple o en la Play Store de Google sin depender de un servicio alojado.
Expo proporciona alojamiento gratuito para las aplicaciones exclusivas de JS creadas por CRNA, lo que le permite compartir su aplicación a través de la aplicación cliente de Expo. Esto requiere registrarse para obtener una cuenta Expo.
Instale la herramienta de línea de comandos exp y ejecute el comando de publicación:
$ npm i -g exp
$ exp publish
También puede utilizar un servicio como las compilaciones independientes de Expo si desea obtener un IPA/APK para su distribución sin tener que compilar el código nativo usted mismo.
Si desea crear e implementar su aplicación usted mismo, deberá expulsarla de CRNA y usar Xcode y Android Studio.
Esto suele ser tan simple como ejecutar npm run eject en su proyecto, que lo guiará a través del proceso. Asegúrese de instalar react-native-cli y seguir la guía de introducción al código nativo para React Native.
Si ha utilizado las API de Expo mientras trabajaba en su proyecto, esas llamadas a la API dejarán de funcionar si se expulsa a un proyecto React Native normal. Si desea continuar usando esas API, puede expulsar a "React Native + ExpoKit", lo que aún le permitirá crear su propio código nativo y continuar usando las API de Expo. Consulte la guía de expulsión para obtener más detalles sobre esta opción.
Si no puede cargar su aplicación en su teléfono debido a un tiempo de espera de la red o una conexión rechazada, un buen primer paso es verificar que su teléfono y su computadora estén en la misma red y que puedan comunicarse entre sí. La aplicación Create React Native necesita acceso a los puertos 19000 y 19001, así que asegúrese de que la configuración de su red y firewall permita el acceso desde su dispositivo a su computadora en ambos puertos.
Intente abrir un navegador web en su teléfono y abra la URL que imprime el script del empaquetador, reemplazando exp:// con http:// . Así, por ejemplo, si debajo del código QR de tu terminal ves:
exp://192.168.0.1:19000
Intente abrir Safari o Chrome en su teléfono y cargar
http://192.168.0.1:19000
y
http://192.168.0.1:19001
Si esto funciona, pero aún no puede cargar su aplicación escaneando el código QR, abra un problema en el repositorio Crear aplicación nativa React con detalles sobre estos pasos y cualquier otro mensaje de error que haya recibido.
Si no puede cargar la URL http en el navegador web de su teléfono, intente usar la función de anclaje a red/punto de acceso móvil en su teléfono (aunque tenga cuidado con el uso de datos), conecte su computadora a esa red WiFi y reinicie el empaquetador. Si está utilizando una VPN, es posible que deba desactivarla.
Si estás en una Mac, hay algunos errores que los usuarios a veces ven cuando intentan npm run ios :
Es posible que desee seguir algunos pasos para solucionar este tipo de errores:
Command Line Tools esté configurada en algo. A veces, cuando Homebrew instala las herramientas CLI por primera vez, esta opción se deja en blanco, lo que puede impedir que las utilidades de Apple encuentren el simulador. Asegúrese de volver a ejecutar npm/yarn run ios después de hacerlo.Reset Contents and Settings... Una vez finalizado, salga del simulador y vuelva a ejecutar npm/yarn run ios .Si no eres capaz de escanear el código QR, asegúrate de que la cámara de tu teléfono está enfocando correctamente, y también asegúrate de que el contraste entre los dos colores de tu terminal es lo suficientemente alto. Por ejemplo, es posible que los temas predeterminados de WebStorm no tengan suficiente contraste para que los códigos QR de las terminales se puedan escanear con los lectores de códigos de barras del sistema que utiliza la aplicación Expo.
Si esto le causa problemas, puede intentar cambiar el tema de color de su terminal para que tenga más contraste o ejecutar la aplicación Create React Native desde un terminal diferente. También puede ingresar manualmente la URL impresa por el script del empaquetador en la barra de búsqueda de la aplicación Expo para cargarla manualmente.
