meteor react native
2.8.1
Conecte seu aplicativo nativo do React ao seu servidor de meteoros e aproveite os recursos específicos de meteoros, como contas, rastreadores de dados reativos, etc. Compatíveis com a versão mais recente do React Native.
Guia do Meteor · Oficina para iniciantes · Documentação completa da API · Exemplo de projeto · Modelo de partida (Expo) · Mais pacotes e recursos
npm install --save @meteorrn/core@react-native-community/netinfo instalado@react-native-async-storage/async-storage@>=1.8.1 instalado. Se você estiver usando a Expo, ou de outra forma não poderá usar @react-native-async-storage/async-storage , leia abaixo Este pacote usa @react-native-async-storage/async-storage por padrão. Isso pode causar problemas se você estiver usando certas versões nativas do React ou se estiver usando a Expo. Para usar uma implementação personalizada do AsyncStorage, passe -o como uma opção em Meteor.connect :
import { AsyncStorage } from 'react-native' ;
// ...
Meteor . connect ( 'wss://myapp.meteor.com/websocket' , { AsyncStorage } ) ; Se você estiver usando a API AsyncStorage , é importante que você use a mesma versão que o Meteorrn está usando ou os problemas podem ser causados devido às versões conflitantes.
Verifique se você está usando o mesmo asyncStorage que você passa para o meteoro (ou @react-native-async-storage/async-storage se não estiver passando por nada), ou pode usar a interface do pacote do MeteorrN.
Este exemplo mostra como usar a implementação da loja segura da Expo como armazenamento assíncrono. Observe que o armazenamento seguro no Android e no iOS tem um limite de tamanho superior baixo de alguns 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 ;Cenários exclusivos: executando o aplicativo em um dispositivo físico, mas deseja se conectar à máquina de desenvolvimento local? Confira este comentário de edição.
O pacote @meteorrn/core foi mantido o mais leve possível. Para acessar mais recursos, você pode usar pacotes complementares.
Aqui estão alguns exemplos:
@meteorrn/oauth-google : permite que você permita que os usuários faça login no seu aplicativo com o google@meteorrn/oauth-facebook : permite que você permita que os usuários fizessem login no seu aplicativo com o FacebookPara obter a lista completa de pacotes oficialmente reconhecidos, consulte o @meteorrn Github Org.
Este pacote é compatível com as versões nativas do React de 0,60,0 a mais recente (0,63.2)
Para react nativo <0,60.0 Use o react-nativo-meteor.
Migrando do react-native-meteor :
MeteorListView & MeteorComplexListView foram removidosCollectionFS foi removidocreateContainer foi removidoconnectMeteor ) foram removidoscomposeWithTracker foi removido Embora este pacote tenha sido projetado com o React Native em mente, ele também é capaz de executar na Web (usando react-dom ). Isso pode ser útil se você precisar de uma implementação de meteoros leves, se desejar criar um aplicativo cliente separado da base de código do servidor, etc. A única alteração necessária é fornecer uma implementação do AsyncStorage. Aqui está um exemplo simples:
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 } ) ; A guia Github Lankes inclui um Changelog completo
Para garantir que os pacotes de companheiros meteorrn usem as mesmas versões de pacotes externos, como o AsyncStorage que o núcleo, @meteorrn/core fornece uma interface de pacotes, onde os pacotes complementares podem acessar determinados pacotes. Atualmente, a interface do pacote retorna um objeto com as seguintes propriedades:
import Meteor from '@meteorrn/core' ;
const { AsyncStorage } = Meteor . packageInterface ( ) ;observeChanges (mas implementa observe ) A biblioteca inclui várias classes e construções internas, que operam principalmente por conta própria e sem a influência do usuário.
A depuração da biblioteca que trabalha como esperada exige ouvir vários eventos. A seguir, mostra vários eventos que permitem registro e inspeção detalhados.
O registro pode ser útil para análise e instrumentação de aplicativos de produção, onde nenhum acesso ao console é possível
A maneira mais conveniente de rastrear internos é via Data.onChange :
const Data = Meteor . getData ( ) ;
data . onChange ( ( event ) => console . debug ( event ) ) ;Sob o capô, isso faz:
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 ) ; Você também pode ouvir no loggingIn , loggingOut , onLogin , onLoginFailure e 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 ) ) ;
} ) ; A biblioteca tenta usar o WebSocket nativo, fornecido pelo Reactnative. Com os seguintes eventos, você pode conectar-se às mensagens de baixo nível com o servidor:
open - o websocket abre com sucessoclose - o WebSocket fecha com sucessomessage:out - Uma mensagem é enviada ao servidormessage:in - Uma mensagem vem do servidorerror - ocorreu um erro no nível do 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 a possibilidade de conectar -se ao WebSocket um nível mais baixo acessando o soquete bruto.
Isso é altamente desencorajado para produção, use por sua conta e risco! Observe que o data.ddp.socket ouve alguns deles já (por exemplo, erro) e os borbulha, mas também lida com a limpeza e a coleta de lixo corretamente. Os erros de soquete bruto terão a propriedade
isRawdefinida comotrue.
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 ) ; Você pode conectar -se diretamente a eventos de banco de dados do minimongo:
const Data = Meteor . getData ( ) ;
Data . db . on ( 'change' , ( e ) => console . debug ( e ) ) ;Enquanto o Meteor depende de conexões do WebSocket e DDP como protocolo, às vezes você deseja enviar dados sobre o HTTP.
O exemplo a seguir fornece uma maneira fácil de ouvir erros e enviá -los para um serviço via solicitação 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 usa o meteoro react nativo em seu aplicativo nativo | StarlingRealTime usa o meteor react nativo em seu aplicativo de produção |
| lea.online | Plano B Schule |
|---|---|
| Lea.Online usa o meteoro react nativo em seu aplicativo de aprendizado móvel nativo | O Plano B Schule usa o Meteor React Native em seu aplicativo de produção |
Deseja mostrar seu aplicativo usando o meteoro-reagt-nativo? Basta criar um PR para adicionar seu logotipo aqui.
O nativo de Meteor React é mantido por Jan Küster e foi mantido anteriormente por Nathaniel Dsouza, que está disponível para consulta: [email protected]
Agradecemos quaisquer contribuições para este projeto!
Se você tiver um problema, uma pergunta ou deseja discutir as coisas, use nosso link de problema que o ajudará a encontrar o local certo para perguntar ou contar.
Se você deseja contribuir com código, verifique se você leu nosso guia de contribuição e nosso código de conduta.
Você pode nos perguntar a qualquer momento, se ficar preso ou qualquer um desses documentos não é claro para você.
MIT, consulte o arquivo de licença
