Une esquisse très approximative d'un navigateur Web mobile construit avec react-native (un "omnibar" et un WebView ). Le navigateur s'interface avec une API de passerelle (que je pourrais éventuellement également mettre en place sur GitHub) qui fait office de transport pour les protocoles décentralisés (actuellement non pris en charge) ( DAT , actuellement).
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 ) )Ce projet a été démarré avec Create React Native App.
Vous trouverez ci-dessous des informations sur l'exécution des tâches courantes. La version la plus récente de ce guide est disponible ici.
Vous ne devriez avoir besoin de mettre à jour l’installation globale de create-react-native-app que très rarement, idéalement jamais.
La mise à jour de la dépendance react-native-scripts de votre application devrait être aussi simple que de modifier le numéro de version dans package.json et de réinstaller les dépendances de votre projet.
La mise à niveau vers une nouvelle version de React Native nécessite la mise à jour des versions des packages react-native , react et expo , ainsi que la définition de la sdkVersion correcte dans app.json . Consultez le guide de gestion des versions pour obtenir des informations à jour sur la compatibilité des versions de package.
Si Yarn a été installé lors de l'initialisation du projet, alors les dépendances auront été installées via Yarn, et vous devriez probablement l'utiliser également pour exécuter ces commandes. Contrairement à l'installation des dépendances, la syntaxe d'exécution des commandes est identique pour Yarn et NPM au moment d'écrire ces lignes.
npm startExécute votre application en mode développement.
Ouvrez-le dans l'application Expo sur votre téléphone pour le visualiser. Il se rechargera si vous enregistrez les modifications apportées à vos fichiers, et vous verrez les erreurs de construction et les journaux dans le terminal.
Parfois, vous devrez peut-être réinitialiser ou vider le cache du packager React Native. Pour ce faire, vous pouvez passer l'indicateur --reset-cache au script de démarrage :
npm start --reset-cache
# or
yarn start --reset-cache
npm testExécute le lanceur de tests Jest sur vos tests.
npm run ios Comme npm start , mais tente également d'ouvrir votre application dans le simulateur iOS si vous êtes sur un Mac et que vous l'avez installée.
npm run android Comme npm start , mais tente également d'ouvrir votre application sur un appareil ou un émulateur Android connecté. Nécessite une installation d'outils de build Android (voir la documentation React Native pour une configuration détaillée). Nous vous recommandons également d'installer Genymotion comme émulateur Android. Une fois que vous avez terminé de configurer l'environnement de construction natif, il existe deux options pour rendre la bonne copie d' adb disponible pour Create React Native App :
adb d'Android StudioSettings -> ADB . Sélectionnez « Utiliser les outils du SDK Android personnalisés » et mettez à jour avec votre répertoire SDK Android. adb de Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/ .npm run ejectCela lancera le processus « d'éjection » des scripts de build de Create React Native App. Quelques questions vous seront posées sur la manière dont vous souhaitez construire votre projet.
Attention : exécuter eject est une action permanente (en dehors du système de contrôle de version que vous utilisez). Une application éjectée nécessitera la configuration d’un environnement Xcode et/ou Android Studio.
Vous pouvez modifier app.json pour inclure les clés de configuration sous la clé expo .
Pour modifier le nom d'affichage de votre application, définissez la clé expo.name dans app.json sur une chaîne appropriée.
Pour définir une icône d'application, définissez la clé expo.icon dans app.json comme étant un chemin local ou une URL. Il est recommandé d'utiliser un fichier png 512x512 avec transparence.
Ce projet est configuré pour utiliser Jest pour les tests. Vous pouvez configurer la stratégie de test de votre choix, mais Jest fonctionne immédiatement. Créez des fichiers de test dans des répertoires appelés __tests__ ou avec l'extension .test pour que les fichiers soient chargés par jest. Voir le projet de modèle pour un exemple de test. La documentation de Jest est également une ressource formidable, tout comme le didacticiel de test React Native.
Vous pouvez configurer certains comportements de Create React Native App à l'aide de variables d'environnement.
Lorsque vous démarrez votre projet, vous verrez quelque chose comme ceci pour l'URL de votre projet :
exp://192.168.0.2:19000
Le « manifeste » sur cette URL indique à l'application Expo comment récupérer et charger le bundle JavaScript de votre application. Ainsi, même si vous le chargez dans l'application via une URL telle que exp://localhost:19000 , l'application client Expo essaiera toujours de récupérez votre application à l'adresse IP fournie par le script de démarrage.
Dans certains cas, cela est loin d’être idéal. Cela peut être le cas si vous devez exécuter votre projet à l'intérieur d'une machine virtuelle et que vous devez accéder au packager via une adresse IP différente de celle qui s'imprime par défaut. Afin de remplacer l'adresse IP ou le nom d'hôte détecté par Create React Native App, vous pouvez spécifier votre propre nom d'hôte via la variable d'environnement REACT_NATIVE_PACKAGER_HOSTNAME :
Mac et Linux :
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Fenêtres :
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
L'exemple ci-dessus amènerait le serveur de développement à écouter sur exp://my-custom-ip-address-or-hostname:19000 .
Create React Native App fait beaucoup de travail pour rendre la configuration et le développement d'applications simples et directs, mais il est très difficile de faire de même pour le déploiement sur l'App Store d'Apple ou le Play Store de Google sans s'appuyer sur un service hébergé.
Expo fournit un hébergement gratuit pour les applications JS uniquement créées par CRNA, vous permettant de partager votre application via l'application client Expo. Cela nécessite l’inscription d’un compte Expo.
Installez l'outil de ligne de commande exp et exécutez la commande de publication :
$ npm i -g exp
$ exp publish
Vous pouvez également utiliser un service tel que les versions autonomes d'Expo si vous souhaitez obtenir un IPA/APK à distribuer sans avoir à créer vous-même le code natif.
Si vous souhaitez créer et déployer votre application vous-même, vous devrez vous éjecter de CRNA et utiliser Xcode et Android Studio.
C'est généralement aussi simple que d'exécuter npm run eject dans votre projet, ce qui vous guidera tout au long du processus. Assurez-vous d'installer react-native-cli et suivez le guide de démarrage du code natif pour React Native.
Si vous avez utilisé les API Expo tout en travaillant sur votre projet, ces appels d'API cesseront de fonctionner si vous vous éjectez vers un projet React Native standard. Si vous souhaitez continuer à utiliser ces API, vous pouvez vous éjecter vers « React Native + ExpoKit » qui vous permettra toujours de créer votre propre code natif et de continuer à utiliser les API Expo. Consultez le guide d'éjection pour plus de détails sur cette option.
Si vous ne parvenez pas à charger votre application sur votre téléphone en raison d'un délai d'attente du réseau ou d'une connexion refusée, une bonne première étape consiste à vérifier que votre téléphone et votre ordinateur sont sur le même réseau et qu'ils peuvent se joindre. Create React Native App doit accéder aux ports 19000 et 19001, alors assurez-vous que vos paramètres réseau et pare-feu autorisent l'accès de votre appareil à votre ordinateur sur ces deux ports.
Essayez d'ouvrir un navigateur Web sur votre téléphone et d'ouvrir l'URL imprimée par le script du packager, en remplaçant exp:// par http:// . Ainsi, par exemple, si sous le code QR de votre terminal vous voyez :
exp://192.168.0.1:19000
Essayez d'ouvrir Safari ou Chrome sur votre téléphone et de charger
http://192.168.0.1:19000
et
http://192.168.0.1:19001
Si cela fonctionne, mais que vous ne parvenez toujours pas à charger votre application en scannant le code QR, veuillez ouvrir un problème sur le référentiel Create React Native App avec des détails sur ces étapes et tout autre message d'erreur que vous avez pu recevoir.
Si vous ne parvenez pas à charger l'URL http dans le navigateur Web de votre téléphone, essayez d'utiliser la fonction de partage de connexion/point d'accès mobile sur votre téléphone (méfiez-vous cependant de l'utilisation des données), connectez votre ordinateur à ce réseau WiFi et redémarrez le packager. Si vous utilisez un VPN, vous devrez peut-être le désactiver.
Si vous êtes sur un Mac, les utilisateurs voient parfois quelques erreurs lorsqu'ils tentent d' npm run ios :
Vous pouvez suivre quelques étapes pour résoudre ce type d'erreurs :
Command Line Tools est définie sur quelque chose. Parfois, lorsque les outils CLI sont installés pour la première fois par Homebrew, cette option reste vide, ce qui peut empêcher les utilitaires Apple de trouver le simulateur. Assurez-vous de réexécuter npm/yarn run ios après cela.Reset Contents and Settings... . Une fois cette opération terminée, quittez le simulateur et réexécutez npm/yarn run ios .Si vous ne parvenez pas à scanner le code QR, assurez-vous que l'appareil photo de votre téléphone fait correctement la mise au point et assurez-vous également que le contraste des deux couleurs de votre terminal est suffisamment élevé. Par exemple, les thèmes par défaut de WebStorm peuvent ne pas avoir suffisamment de contraste pour que les codes QR des terminaux puissent être numérisés avec les lecteurs de codes-barres système utilisés par l'application Expo.
Si cela vous pose des problèmes, vous pouvez essayer de modifier le thème de couleur de votre terminal pour avoir plus de contraste ou d'exécuter Create React Native App à partir d'un autre terminal. Vous pouvez également saisir manuellement l'URL imprimée par le script du packager dans la barre de recherche de l'application Expo pour la charger manuellement.
