meteor react native
2.8.1
Подключите свое приложение React Native к вашему метеорному серверу и воспользуйтесь преимуществами специфических для метеорных функций, таких как учетные записи, трекеры реактивных данных и т. Д., Совместимые с последней версией React Native.
Метеорский гид · Семинар для начинающих · Полная документация по API · Пример проекта · Шаблон стартера (Expo) · Больше пакетов и ресурсов
npm install --save @meteorrn/core@react-native-community/netinfo@react-native-async-storage/async-storage@>=1.8.1 . Если вы используете Expo или иным образом не можете использовать @react-native-async-storage/async-storage , прочитайте ниже В этом пакете по умолчанию используется @react-native-async-storage/async-storage . Это может вызвать проблемы, если вы используете определенные нативные версии React, или если вы используете Expo. Чтобы использовать пользовательскую реализацию AsyncStorage, передайте ее в качестве опции в Meteor.connect :
import { AsyncStorage } from 'react-native' ;
// ...
Meteor . connect ( 'wss://myapp.meteor.com/websocket' , { AsyncStorage } ) ; Если вы используете API AsyncStorage самостоятельно, важно, чтобы вы использовали ту же версию, которую использует Meteorrn, или проблемы могут быть вызваны из -за противоречивых версий.
Убедитесь, что вы используете такое же асинхинд, вы переходите в Meteor (или @react-native-async-storage/async-storage если вы ничего не проходите), или вы можете использовать интерфейс пакета Meteorrn.
В этом примере показано, как использовать реализацию Secure Store Expo в качестве асинхронного хранилища. Обратите внимание, что безопасное хранилище как в Android, так и в iOS имеет низкий предел верхнего размера в нескольких мегабайтах.
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 ;Уникальные сценарии: запуск приложения на физическом устройстве, но хотите подключиться к локальной машине разработки? Проверьте этот вопрос комментарий.
Пакет @meteorrn/core сохранился как можно более легким. Чтобы получить доступ к большему количеству функций, вы можете использовать пакеты компаньонов.
Вот несколько примеров:
@meteorrn/oauth-google : позволяет вам позволить пользователям войти в ваше приложение с помощью Google@meteorrn/oauth-facebook : позволяет вам позволить пользователям войти в ваше приложение с FacebookДля полного списка официально распознанных пакетов ознакомьтесь с @meteorrn github org.
Этот пакет совместим с нативными версиями React от 0,60,0 до последних (0,63,2)
Для реагирования нативно <0,60,0 Используйте React-Meteor.
Мигрируя из react-native-meteor :
MeteorListView & MeteorComplexListView были удаленыCollectionFS был удаленcreateContainer был удаленconnectMeteor ) были удаленыcomposeWithTracker был удален В то время как этот пакет был разработан с учетом REACT Native, он также способен работать в Интернете (с помощью react-dom ). Это может быть полезно, если вам нужна легкая реализация Meteor, если вы хотите создать клиентское приложение, отдельное от кодовой базы вашего сервера, и т. Д. Единственным необходимым изменением является обеспечение реализации AsyncStorage. Вот простой пример:
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 } ) ; Вкладка GitHub Releses включает в себя полную изменение изменений
Чтобы гарантировать, что пакеты Meteorrn Companion используют те же версии внешних пакетов, как AsyncStorage, что и ядро, @meteorrn/core предоставляет интерфейс пакета, где пакеты Companion могут получить доступ к определенным пакетам. В настоящее время интерфейс пакета возвращает объект со следующими свойствами:
import Meteor from '@meteorrn/core' ;
const { AsyncStorage } = Meteor . packageInterface ( ) ;observeChanges (но он реализует observe ) Библиотека включает в себя несколько внутренних классов и конструкций, которые в основном работают самостоятельно и без влияния пользователя.
Отладка библиотеки, работающая так же, как и ожидалось, требует прослушивания нескольких событий. На следующем показано несколько событий, которые позволяют подробно регистрироваться и осмотреть.
Регистрация может быть полезна для анализа и инструментов производственных приложений, где невозможный консольный доступ не возможно
Наиболее удобный способ отслеживать Data.onChange
const Data = Meteor . getData ( ) ;
data . onChange ( ( event ) => console . debug ( event ) ) ;Под капюшоном это делает:
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 ) ; Вы также можете прослушать loggingIn , loggingOut , onLogin , onLoginFailure и 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 ) ) ;
} ) ; Библиотека пытается использовать собственный WebSocket, предоставленный Reactnative. С помощью следующих событий вы можете подключиться к сообщению низкого уровня с сервером:
open - WebSocket успешно открываетсяclose - WebSocket успешно закрываетсяmessage:out - сообщение отправляется на серверmessage:in - Сообщение приходит с сервераerror - ошибка произошла на уровне 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 ) ) ;
} ) ; Существует возможность подключиться к WebSocket на один уровень ниже, получив доктор необработанного разъема.
Это очень обескуражено для производства, используйте свой собственный риск! Обратите внимание, что Data.ddp.socket прослушивает некоторые из них уже (например, ошибка) и поднимает их, но также правильно обрабатывает очистку и сбор мусора. Ошибки необработанных сокетов будут иметь свойство
isRaw, установленное наtrue.
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 ) ; Вы можете подключить события DB от Minimongo напрямую:
const Data = Meteor . getData ( ) ;
Data . db . on ( 'change' , ( e ) => console . debug ( e ) ) ;В то время как Meteor опирается на соединения WebSocket и DDP в качестве протокола, вы можете иногда отправлять данные через HTTP.
В следующем примере предоставляет простой способ прослушивания ошибок и отправить их в службу по 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 использует Meteor React Native в своем родном приложении | StarlingRealtime использует Meteor React Native в своем производственном приложении |
| Lea.online | План B Schule |
|---|---|
| Lea.online использует Meteor React Native в своем приложении для мобильного обучения | План B Schule использует Meteor React Native в своем производственном приложении |
Хотите продемонстрировать свое приложение с помощью Meteor-React-National? Просто создайте пиар, чтобы добавить свой логотип здесь.
Meteor React Carniy поддерживается Яном Кюстером и ранее поддерживал Натаниэль Дсуза, который доступен для консультации: [email protected]
Мы ценим любой вклад в этот проект!
Если у вас есть проблема, вопрос или вы хотите обсудить вещи, то используйте нашу ссылку, которая поможет вам найти подходящее место, чтобы задать или сказать.
Если вы хотите внести код, то, пожалуйста, убедитесь, что вы прочитали наше руководство по взносу и наш код поведения.
Вы можете спросить нас в любое время, если вы застряли или какой -либо из этих документов вам неясно.
MIT, см. Файл лицензии
