meteor react native
2.8.1
Connectez votre application Native React à votre serveur Meteor et profitez des fonctionnalités spécifiques aux météores comme des comptes, des trackers de données réactifs, etc. Compatible avec la dernière version de React Native.
Guide de météore · Atelier des débutants · Documentation complète de l'API · Exemple de projet · Modèle de démarrage (Expo) · Plus de packages et de ressources
npm install --save @meteorrn/core@react-native-community/netinfo@react-native-async-storage/async-storage@>=1.8.1 installé. Si vous utilisez Expo, ou si vous ne pouvez pas utiliser @react-native-async-storage/async-storage , lisez ci-dessous Ce package utilise @react-native-async-storage/async-storage par défaut. Cela peut entraîner des problèmes si vous utilisez certaines versions natives React, ou si vous utilisez Expo. Pour utiliser une implémentation AsyncStorage personnalisée, passez-la comme une option dans Meteor.connect :
import { AsyncStorage } from 'react-native' ;
// ...
Meteor . connect ( 'wss://myapp.meteor.com/websocket' , { AsyncStorage } ) ; Si vous utilisez vous-même l'API AsyncStorage , il est important que vous utilisiez la même version que Meteorrn utilise, ou des problèmes pourraient être causés en raison des versions contradictoires.
Assurez-vous que vous utilisez le même asyncstorage que vous passez dans Meteor (ou @react-native-async-storage/async-storage si vous ne passez rien), ou vous pouvez utiliser l'interface de package de Meteorrn.
Cet exemple montre comment utiliser la mise en œuvre de la boutique sécurisée d'Expo comme stockage asynchrone. Remarque que le stockage sécurisé dans Android et iOS a une limite de taille supérieure basse de quelques mégaoctets.
import * as SecureStore from 'expo-secure-store' ;
// ...
Meteor . connect ( 'wss://myapp.meteor.com/websocket' , {
AsyncStorage : {
getItem : SecureStore . getItemAsync ,
setItem : SecureStore . setItemAsync ,
removeItem : SecureStore . deleteItemAsync ,
} ,
} ) ; import Meteor , { Mongo , withTracker } from '@meteorrn/core' ;
// "mycol" should match the name of the collection on your meteor server,
// or pass null for a local collection
let MyCol = new Mongo . Collection ( 'mycol' ) ;
Meteor . connect ( 'wss://myapp.meteor.com/websocket' ) ; // Note the /websocket after your URL
class App extends React . Component {
render ( ) {
let { myThing } = this . props ;
return (
< View >
< Text > Here is the thing: { myThing . name } </ Text >
</ View >
) ;
}
}
let AppContainer = withTracker ( ( ) => {
Meteor . subscribe ( 'myThing' ) ;
let myThing = MyCol . findOne ( ) ;
return {
myThing ,
} ;
} ) ( App ) ;
export default AppContainer ;Scénarios uniques: exécuter l'application sur un appareil physique mais vous souhaitez se connecter à la machine de développement locale? Consultez ce commentaire sur le problème.
Le package @meteorrn/core a été maintenu aussi léger que possible. Pour accéder à plus de fonctionnalités, vous pouvez utiliser des packages compagnon.
Voici quelques exemples:
@meteorrn/oauth-google : vous permet de permettre aux utilisateurs de vous connecter à votre application avec Google@meteorrn/oauth-facebook : vous permet de laisser les utilisateurs vous connecter à votre application avec FacebookPour la liste complète des forfaits officiellement reconnus, consultez l'organisation @Meteorrn GitHub.
Ce package est compatible avec les versions natives React de 0,60,0 au plus tard (0,63,2)
Pour React Native <0,60,0, utilisez React-Native-METEOR.
Migrant à partir react-native-meteor :
MeteorListView et MeteorComplexListView ont été supprimésCollectionFS a été supprimécreateContainer a été suppriméconnectMeteor ) ont été suppriméscomposeWithTracker a été supprimé Bien que ce package ait été conçu avec React Native à l'esprit, il est également capable d'exécuter sur le Web (en utilisant react-dom ). Cela peut être utile si vous avez besoin d'une implémentation de météores légers, si vous souhaitez créer une application client distincte de votre base de code de serveur, etc. Le seul changement requis consiste à fournir une implémentation AsyncStorage. Voici un exemple simple:
const AsyncStorage = {
setItem : async ( key , value ) => window . localStorage . setItem ( key , value ) ,
getItem : async ( key ) => window . localStorage . getItem ( key )
removeItem : async ( key ) => window . localStorage . removeItem ( key )
}
Meteor . connect ( "wss://.../websock" , { AsyncStorage } ) ; L'onglet GitHub Releases comprend un changement complet
Pour s'assurer que les packages compagnon Meteorrn utilisent les mêmes versions de packages externes comme AsyncStorage que le noyau, @meteorrn/core fournit une interface de package, où les packages compagnon peuvent accéder à certains packages. Actuellement, l'interface de package renvoie un objet avec les propriétés suivantes:
import Meteor from '@meteorrn/core' ;
const { AsyncStorage } = Meteor . packageInterface ( ) ;observeChanges (mais il met en œuvre observe ) La bibliothèque comprend plusieurs classes et constructions internes, qui opèrent principalement par eux-mêmes et sans influence de l'utilisateur.
Le débogage de la bibliothèque travaillant comme prévu nécessite l'écoute de plusieurs événements. Ce qui suit montre plusieurs événements qui permettent une journalisation et une inspection détaillées.
La journalisation peut être utile pour l'analyse et l'instrumentation des applications de production où aucun accès à la console n'est possible
Le moyen le plus pratique de suivre les internes est via Data.onChange :
const Data = Meteor . getData ( ) ;
data . onChange ( ( event ) => console . debug ( event ) ) ;Sous le capot, cela fait:
this . db . on ( 'change' , cb ) ;
this . ddp . on ( 'connected' , cb ) ;
this . ddp . on ( 'disconnected' , cb ) ;
this . on ( 'loggingIn' , cb ) ;
this . on ( 'loggingOut' , cb ) ;
this . on ( 'change' , cb ) ; Vous pouvez également écouter sur loggingIn , loggingOut , onLogin , onLoginFailure et change individuellement:
const Data = Meteor . getData ( ) ;
Data . on ( 'loggingIn' , ( e ) => console . debug ( 'loggingIn' , e ) ) ;
// ... const events = [
// connection messages
'connected' ,
'disconnected' ,
// Subscription messages (Meteor Publications)
'ready' ,
'nosub' ,
'added' ,
'changed' ,
'removed' ,
// Method messages (Meteor Methods)
'result' ,
'updated' ,
// Error messages
'error' ,
] ;
const Data = Meteor . getData ( ) ;
events . forEach ( ( eventName ) => {
Data . ddp . on ( eventName , ( event ) => console . debug ( eventName , event ) ) ;
} ) ; La bibliothèque tente d'utiliser le WebSocket natif, fourni par ReactNative. Avec les événements suivants, vous pouvez vous connecter à la messagerie de bas niveau avec le serveur:
open - le WebSocket s'ouvre avec succèsclose - le WebSocket ferme avec succèsmessage:out - Un message est envoyé au serveurmessage:in - un message provient du serveurerror - Une erreur s'est produite au niveau WebSocket const Data = Meteor . getData ( ) ;
const socket = Data . ddp . socket ;
const events = [ 'open' , 'close' , 'message:out' , 'message:in' , 'error' ] ;
events . forEach ( ( eventName ) => {
socket . on ( eventName , ( event ) => console . debug ( eventName , event ) ) ;
} ) ; Il est possible de s'accrocher à WebSocket un niveau inférieur en accédant à la prise brute.
Ceci est très découragé pour la production, utilisez à vos propres risques! Remarquez que Data.ddp.socket écoute déjà certains d'entre eux (par exemple l'erreur) et les bouillonne mais gère également correctement la collecte de nettoyage et des ordures. Les erreurs de socket brutes auront la propriété
isRawdéfinie surtrue.
const Data = Meteor . getData ( ) ;
const rawSocket = Data . ddp . socket . rawSocket ;
rawSocket . onopen = ( e ) => console . debug ( 'raw open' , e ) ;
rawSocket . onmessage = ( e ) => console . debug ( 'raw message' , e ) ;
rawSocket . onclose = ( e ) => console . debug ( 'raw close' , e ) ;
rawSocket . onerror = ( e ) => console . debug ( 'raw error' , e ) ; Vous pouvez vous connecter directement aux événements DB de Minimongo:
const Data = Meteor . getData ( ) ;
Data . db . on ( 'change' , ( e ) => console . debug ( e ) ) ;Bien que Meteor s'appuie sur les connexions WebSocket et DDP en tant que protocole, vous voudrez peut-être parfois envoyer des données sur HTTP.
L'exemple suivant fournit un moyen facile d'écouter les erreurs et de les envoyer à un service via la demande fetch :
// in your App code
const errorToBody = ( err ) => {
const errProps = Object . getOwnPropertyNames ( err ) ;
const formBody = [ ] ;
for ( const prop of errProps ) {
const encodedKey = encodeURIComponent ( prop ) ;
const encodedValue = encodeURIComponent ( err [ prop ] ) ;
formBody . push ( encodedKey + '=' + encodedValue ) ;
}
return formBody . join ( '&' ) ;
} ;
const sendError = ( err ) => {
fetch ( 'https://mydomain.tld/log/error' , {
method : 'POST' ,
headers : {
'Content-Type' : 'application/x-www-form-urlencoded;charset=UTF-8' ,
} ,
body : errToBody ( err ) ,
} )
. then ( console . debug )
. catch ( console . error ) ;
} ;
// hook into all DDP and socket-level errors
const Data = Meteor . getData ( ) ;
Data . dpp . on ( 'error' , ( e ) => {
const error = e instanceof Error ? e : e ?. error ;
return error && sendError ( error ) ;
} ) ; | Whazzup.co | StarlingRealtime |
|---|---|
 | |
| Whazzup.co utilise Meteor React Native dans leur application native | StarlingRealtime utilise le natif de Meteor React dans leur application de production |
| lea.onnée | Plan B Schule |
|---|---|
| Lea.online utilise le natif de Meteor React dans leur application d'apprentissage mobile native | Plan B Schule utilise le natif de Meteor React dans leur application de production |
Vous voulez présenter votre application à l'aide de météores-réagsions-natifs? Créez simplement un PR pour ajouter votre logo ici.
Le natif de Meteor React est maintenu par Jan Küster et a été autrefois entretenu par Nathaniel Dsouza qui est disponible pour consultation: [email protected]
Nous apprécions toute contribution à ce projet!
Si vous avez un problème, une question ou si vous souhaitez discuter des choses, utilisez notre lien de problème qui vous aidera à trouver le bon endroit à demander ou à dire.
Si vous souhaitez contribuer du code, veuillez vous assurer que vous avez lu notre guide de contribution et notre code de conduite.
Vous pouvez nous demander à tout moment, si vous êtes coincé ou si l'un de ces documents ne vous est pas clair.
MIT, voir le fichier de licence
