meteor react native
2.8.1
Schließen Sie Ihre React Native App an Ihren Meteorserver an und nutzen Sie Meteor-spezifische Funktionen wie Konten, reaktive Datenverfolger usw., die mit der neuesten Version von React Native kompatibel sind.
Meteor Guide · Anfänger Workshop · Vollständige API -Dokumentation · Beispiel Projekt · Startervorlage (Expo) · mehr Pakete und Ressourcen
npm install --save @meteorrn/core@react-native-community/netinfo sicher@react-native-async-storage/async-storage@>=1.8.1 installiert haben. Wenn Sie Expo verwenden oder auf andere Weise nicht @react-native-async-storage/async-storage verwenden können, lesen Sie unten unten Dieses Paket verwendet standardmäßig @react-native-async-storage/async-storage . Dies kann zu Problemen führen, wenn Sie bestimmte React Native -Versionen verwenden oder wenn Sie Expo verwenden. Um eine benutzerdefinierte asyncstorage -Implementierung zu verwenden, geben Sie sie als Option in Meteor.connect weiter:
import { AsyncStorage } from 'react-native' ;
// ...
Meteor . connect ( 'wss://myapp.meteor.com/websocket' , { AsyncStorage } ) ; Wenn Sie die AsyncStorage -API selbst verwenden, ist es wichtig, dass Sie dieselbe Version verwenden, die Meteorrn verwendet, oder Probleme aufgrund der widersprüchlichen Versionen verursacht werden.
Stellen Sie sicher, dass Sie die gleiche Asyncstorage verwenden, die Sie in Meteor übergeben (oder @react-native-async-storage/async-storage wenn Sie nichts übergeben), oder Sie können die Paketoberfläche von Meteorrn verwenden.
In diesem Beispiel wird angezeigt, wie die Secure Store -Implementierung von Expo als Async -Speicher verwendet wird. Beachten Sie, dass dieser sichere Speicher in Android und iOS eine niedrige Obergrenze der oberen Größe von ein paar Megabyten aufweist.
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 ;Einzigartige Szenarien: Ausführen der App auf einem physischen Gerät, aber eine Verbindung zum lokalen Entwicklungsgerät herstellen? Schauen Sie sich diesen Ausgabekommentar an.
Das @meteorrn/core -Paket wurde so leicht wie möglich gehalten. Um auf weitere Funktionen zuzugreifen, können Sie Begleitpakete verwenden.
Hier sind einige Beispiele:
@meteorrn/oauth-google : Ermöglicht Ihnen, Benutzer bei Google bei Ihrer App anzumelden.@meteorrn/oauth-facebook : Ermöglicht Ihnen, Benutzer bei Facebook bei Ihrer App anmelden zu lassenDie vollständige Liste der offiziell anerkannten Pakete finden Sie in der @Meteorrn Github Org.
Dieses Paket ist mit React -nativen Versionen von 0,60,0 bis neuem (0,63,2) kompatibel (0,63,2).
Für React Native <0,60.0 verwenden Sie React-Native-Meteor.
Migration vom react-native-meteor :
MeteorListView & MeteorComplexListView wurden entferntCollectionFS wurde entferntcreateContainer wurde entferntconnectMeteor ) wurden entferntcomposeWithTracker wurde entfernt Während dieses Paket unter Berücksichtigung von React Native entworfen wurde, kann es auch im Internet ausgeführt werden (mit react-dom ). Dies kann nützlich sein, wenn Sie eine leichte Meteor-Implementierung benötigen, wenn Sie eine von Ihrer Server-Codebasis getrennte Client-App erstellen möchten. Die einzige erforderliche Änderung besteht darin, eine asyncstorage-Implementierung bereitzustellen. Hier ist ein einfaches Beispiel:
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 } ) ; Die Registerkarte "GitHub Releases" enthält einen vollständigen Changelog
Um sicherzustellen, dass Meteorrn -Begleitpakete dieselben Versionen externer Pakete wie Asyncstorage wie The Core verwenden, bietet @meteorrn/core eine Paketschnittstelle, in der Begleitpakete auf bestimmte Pakete zugreifen können. Derzeit gibt die Paketschnittstelle ein Objekt mit den folgenden Eigenschaften zurück:
import Meteor from '@meteorrn/core' ;
const { AsyncStorage } = Meteor . packageInterface ( ) ;observeChanges (aber sie implementiert observe ) Die Bibliothek umfasst mehrere interne Klassen und Konstrukte, die hauptsächlich selbst und ohne Einfluss des Benutzers arbeiten.
Um die Bibliothek wie erwartet zu debuggen, müssen Sie mehrere Veranstaltungen anhören. Im Folgenden werden mehrere Ereignisse angezeigt, die eine detaillierte Protokollierung und Inspektion ermöglichen.
Die Protokollierung kann für die Analyse und Instrumentierung von Produktions -Apps nützlich sein, bei denen kein Konsolenzugriff möglich ist
Der bequemste Weg, um Interna zu verfolgen, ist über Data.onChange :
const Data = Meteor . getData ( ) ;
data . onChange ( ( event ) => console . debug ( event ) ) ;Unter der Motorhaube tut dies:
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 ) ; Sie können auch auf loggingIn , loggingOut , onLogin , onLoginFailure und ändern und sich einzeln change :
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 ) ) ;
} ) ; Die Bibliothek versucht, das von Reactnative bereitgestellte native WebSocket zu verwenden. Mit den folgenden Ereignissen können Sie sich mit dem Server in die Messaging auf niedriger Ebene einbinden:
open - Das WebSocket wird erfolgreich geöffnetclose - Das Websocket schließt erfolgreich abmessage:out - Eine Nachricht wird an den Server gesendetmessage:in - Eine Nachricht kommt vom Server einerror - Auf der Websocket -Ebene trat ein Fehler auf 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 ) ) ;
} ) ; Es besteht die Möglichkeit, durch Zugriff auf den Rohsteck in Websocket eine niedrigere Stufe zu erreichen.
Dies ist sehr entmutigt für die Produktion und nutzen Sie auf eigenes Risiko! Beachten Sie, dass data.ddp.socket einige dieser bereits (z. B. Fehler) hört und sie aufbaut, aber auch die Reinigung und die Müllsammlung ordnungsgemäß behandelt. Bei Rohsteck -Fehlern wird die
isRaw-Eigenschaft auftrueeingestellt.
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 ) ; Sie können DB -Ereignisse von minimongo direkt anschließen:
const Data = Meteor . getData ( ) ;
Data . db . on ( 'change' , ( e ) => console . debug ( e ) ) ;Während Meteor auf WebSocket -Verbindungen und DDP als Protokoll angewiesen ist, möchten Sie möglicherweise manchmal Daten über HTTP senden.
Das folgende Beispiel bietet eine einfache Möglichkeit, Fehler anzuhören und sie per fetch -Anfrage an einen Dienst zu senden:
// 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 verwendet Meteor React Native in ihrer nativen App | StarlingRealTime verwendet Meteor React Native in ihrer Produktions -App |
| Lea.online | Plan B Schule |
|---|---|
| Lea.online verwendet Meteor React Native in ihrer nativen mobilen Lern -App | Plan B Schule verwendet Meteor React Native in ihrer Produktions -App |
Möchten Sie Ihre App mit Meteor-React-nativ präsentieren? Erstellen Sie einfach eine PR, um Ihr Logo hier hinzuzufügen.
Der gebürtige Meteor React wird von Jan Küster gepflegt und wurde früher von Nathaniel Dsouza gepflegt, der zur Beratung verfügbar ist: [email protected]
Wir schätzen alle Beiträge zu diesem Projekt!
Wenn Sie ein Problem, eine Frage haben oder Dinge diskutieren möchten, verwenden Sie unseren Problemlink, mit dem Sie den richtigen Ort finden können, um zu fragen oder zu sagen.
Wenn Sie Code beitragen möchten, stellen Sie bitte sicher, dass Sie unseren Beitragsleitfaden und unseren Verhaltenskodex gelesen haben.
Sie können uns jederzeit fragen, ob Sie stecken bleiben oder eines dieser Dokumente Ihnen unklar sind.
MIT, siehe Lizenzdatei
