meteor react native
2.8.1
React Native 앱을 Meteor 서버에 연결하고 계정, Reactive Data Tracker 등과 같은 유성 특유의 기능을 활용하십시오. 최신 버전의 React Native와 호환됩니다.
유성 가이드 · 초보자 워크숍 · 전체 API 문서 · 예제 프로젝트 · 스타터 템플릿 (엑스포) · 더 많은 패키지 및 리소스
npm install --save @meteorrn/core@react-native-community/netinfo 설치되어 있는지 확인하십시오@react-native-async-storage/async-storage@>=1.8.1 설치되어 있는지 확인하십시오. 엑스포를 사용 중이거나 그렇지 않으면 @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 } ) ; AsyncStorage API를 직접 사용하는 경우 Meteorrn이 사용하는 것과 동일한 버전을 사용하거나 충돌 버전으로 인해 문제가 발생할 수 있습니다.
Meteor (또는 아무것도 통과하지 않으면 @react-native-async-storage/async-storage )로 전달하는 것과 동일한 Asyncstorage를 사용하고 있는지 확인하십시오.
이 예제는 Expo의 Secure Store 구현을 Async Storage로 사용하는 방법을 보여줍니다. 안드로이드와 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를 확인하십시오.
이 패키지는 0.60.0에서 최신 (0.63.2)까지 React Native 버전과 호환됩니다.
React Native <0.60.0의 경우 React-Native Meteor를 사용하십시오.
react-native-meteor 에서 마이그레이션 :
MeteorListView & MeteorComplexListView 가 제거되었습니다CollectionFS 가 제거되었습니다createContainer 가 제거되었습니다connectMeteor )가 제거되었습니다composeWithTracker 가 제거되었습니다 이 패키지는 React Native를 염두에두고 설계되었지만 웹에서 실행할 수도 있습니다 ( react-dom 사용). 서버 코드베이스와 별도로 클라이언트 앱을 만들려면 가벼운 유성 구현이 필요한 경우 유용 할 수 있습니다. 필요한 유일한 변경 사항은 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 릴리스 탭에는 전체 변경 사항이 포함되어 있습니다
Meteorrn Companion 패키지는 Asyncstorage와 같은 동일한 버전의 외부 패키지를 Core와 같은 버전의 외부 패키지를 사용하도록하기 위해 @meteorrn/core 패키지 인터페이스를 제공하며 동반자 패키지는 특정 패키지에 액세스 할 수 있습니다. 현재 패키지 인터페이스는 다음 속성으로 객체를 반환합니다.
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 ) ) ;
} ) ; 라이브러리는 Reactnative에서 제공하는 기본 WebSocket을 사용하려고 시도합니다. 다음 이벤트를 사용하면 서버와 함께 저수준 메시징에 연결할 수 있습니다.
open -WebSocket이 성공적으로 열립니다close - 웹 소켓이 성공적으로 닫힙니다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 ) ; Minimongo의 DB 이벤트에 직접 연결할 수 있습니다.
const Data = Meteor . getData ( ) ;
Data . db . on ( 'change' , ( e ) => console . debug ( e ) ) ;Meteor는 WebSocket Connections 및 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를 사용합니다. | Plan B Schule은 생산 앱에서 Meteor React Native를 사용합니다. |
Meteor-React Native를 사용하여 앱을 선보이고 싶습니까? 여기에 로고를 추가하기 위해 PR을 만들기 만하면됩니다.
Meteor React Native는 Jan Küster에 의해 유지되었으며 이전에 Nathaniel Dsouza가 상담 할 수있는 [email protected]에 의해 유지되었습니다.
이 프로젝트에 대한 공헌에 감사드립니다!
문제가 있거나 질문이 있거나 논의하고 싶다면 질문하거나 말할 올바른 장소를 찾는 데 도움이되는 문제 링크를 사용하십시오.
코드를 기여하려면 기여 안내서와 행동 강령을 읽었는지 확인하십시오.
당신은 언제든지 우리에게 물어볼 수 있습니다. 당신이 붙어 있거나 이러한 문서 중 하나가 당신에게 불분명하다면 언제든지 우리에게 물어볼 수 있습니다.
MIT, 라이센스 파일을 참조하십시오
