meteor react native
2.8.1
Conecte su aplicación React Native a su servidor de meteoritos y aproveche las características específicas de Meteor como cuentas, rastreadores de datos reactivos, etc. Compatible con la última versión de React Native.
Guía de meteoritos · Taller de principiantes · Documentación de API completa · Ejemplo de proyecto · Plantilla de arranque (expo) · Más paquetes y recursos
npm install --save @meteorrn/core@react-native-community/netinfo instalado@react-native-async-storage/async-storage@>=1.8.1 instalado. Si está utilizando Expo o no puede usar @react-native-async-storage/async-storage , lea a continuación Este paquete usa @react-native-async-storage/async-storage de forma predeterminada. Esto puede causar problemas si está utilizando ciertas versiones nativas de React, o si está utilizando Expo. Para usar una implementación personalizada de AsyncStorage, pase como una opción en Meteor.connect :
import { AsyncStorage } from 'react-native' ;
// ...
Meteor . connect ( 'wss://myapp.meteor.com/websocket' , { AsyncStorage } ) ; Si está utilizando la API AsyncStorage usted mismo, es importante que use la misma versión que Meteorrn está utilizando, o los problemas podrían causarse debido a las versiones conflictivas.
Asegúrese de usar el mismo asyncstorage que pasa a Meteor (o @react-native-async-storage/async-storage si no está pasando nada), o puede usar la interfaz de paquete de Meteorrn.
Este ejemplo muestra cómo usar la implementación de la tienda segura de Expo como almacenamiento de async. Tenga en cuenta que ese almacenamiento seguro tanto en Android como en iOS tiene un límite de tamaño superior bajo de unos pocos megabytes.
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 ;Escenarios únicos: ¿ejecutar la aplicación en un dispositivo físico pero desea conectarse a la máquina de desarrollo local? Mira este comentario de problemas.
El paquete @meteorrn/core se ha mantenido lo más ligero posible. Para acceder a más funciones, puede usar paquetes complementarios.
Aquí hay algunos ejemplos:
@meteorrn/oauth-google : le permite permitir que los usuarios inicien sesión en su aplicación con Google@meteorrn/oauth-facebook : le permite permitir que los usuarios inicien sesión en su aplicación con FacebookPara ver la lista completa de paquetes oficialmente reconocidos, consulte el @MeteORRN GitHub Org.
Este paquete es compatible con las versiones nativas de React de 0.60.0 a más reciente (0.63.2)
Para React Native <0.60.0 Use react-nativo-meteor.
Migrar de react-native-meteor :
MeteorListView y MeteorComplexListViewCollectionFS ha sido eliminadocreateContainer ha sido eliminadoconnectMeteor )composeWithTracker ha sido eliminado Si bien este paquete fue diseñado con React Native en mente, también es capaz de ejecutarse en Web (usando react-dom ). Esto puede ser útil si necesita una implementación de meteoritos de peso ligero, si desea crear una aplicación de cliente separada de la base de código de su servidor, etc. El único cambio requerido es proporcionar una implementación de AsyncStorage. Aquí hay un ejemplo 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 } ) ; La pestaña de lanzamientos de GitHub incluye un cambio de cambio completo
Para garantizar que los paquetes complementarios de Meteorrn usen las mismas versiones de paquetes externos como AsyncStorage que Core, @meteorrn/core proporcionan una interfaz de paquete, donde los paquetes complementarios pueden acceder a ciertos paquetes. Actualmente, la interfaz del paquete devuelve un objeto con las siguientes propiedades:
import Meteor from '@meteorrn/core' ;
const { AsyncStorage } = Meteor . packageInterface ( ) ;observeChanges (pero implementa observe ) La biblioteca incluye varias clases y construcciones internas, que en su mayoría operan por su cuenta y sin la influencia del usuario.
La depuración de la biblioteca que funciona como se esperaba requiere escuchar varios eventos. A continuación se muestra varios eventos que permiten registro e inspección detallados.
El registro puede ser útil para el análisis e instrumentación de aplicaciones de producción donde no es posible acceso a la consola
La forma más conveniente de rastrear las partes internas es a través Data.onChange .
const Data = Meteor . getData ( ) ;
data . onChange ( ( event ) => console . debug ( event ) ) ;Bajo el capó esto lo hace:
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 ) ; También puede escuchar en loggingIn , loggingOut , onLogin , onLoginFailure y change individualmente:
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 biblioteca intenta usar el WebSocket nativo, proporcionado por Reactnative. Con los siguientes eventos, puede conectarse a los mensajes de bajo nivel con el servidor:
open : el WebSocket se abre correctamenteclose : el WebSocket se cierra con éxitomessage:out : se envía un mensaje al servidormessage:in - Un mensaje proviene del servidorerror : se produjo un error en el nivel de 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 ) ) ;
} ) ; Existe la posibilidad de conectarse a WebSocket un nivel más bajo acceder al enchufe sin procesar.
Esto está muy desanimado para la producción, ¡use bajo su propio riesgo! Tenga en cuenta que data.ddp.socket escucha algunos de estos ya (por ejemplo, error) y los burbujea, pero también maneja la limpieza y la recolección de basura correctamente. Los errores de enchufe sin procesar tendrán la propiedad
isRawestablecida entrue.
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 ) ; Puede conectarse a los eventos de DB desde Minimongo directamente:
const Data = Meteor . getData ( ) ;
Data . db . on ( 'change' , ( e ) => console . debug ( e ) ) ;Si bien Meteor se basa en las conexiones WebSocket y DDP como protocolo, es posible que a veces desee enviar datos a través de HTTP.
El siguiente ejemplo proporciona una manera fácil de escuchar errores y enviarlos a un servicio a través de la solicitud de 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 Utiliza Meteor React Native en su aplicación nativa | StarlingRealTime usa Meteor React Native en su aplicación de producción |
| Lea. | Plan B Schule |
|---|---|
| Lea.Online usa Meteor React Native en su aplicación de aprendizaje móvil nativo | Plan B Schule utiliza Meteor React Native en su aplicación de producción |
¿Quiere mostrar su aplicación con Meteor-React-Native? Simplemente cree un PR para agregar su logotipo aquí.
Meteor React Native es mantenido por Jan Küster y anteriormente fue mantenido por Nathaniel Dsouza, quien está disponible para consulta: [email protected]
¡Apreciamos cualquier contribución a este proyecto!
Si tiene un problema, una pregunta o desea discutir cosas, use nuestro enlace de problema que lo ayudará a encontrar el lugar adecuado para preguntar o contar.
Si desea contribuir con código, asegúrese de haber leído nuestra Guía de contribución y nuestro código de conducta.
Puede preguntarnos en cualquier momento, si se atasca o cualquiera de estos documentos no está claro para usted.
MIT, ver archivo de licencia
